vue は、単一選択、複数選択、すべての逆選択、およびすべての選択なしの機能をどのように実装しますか (コード付き)

この記事の内容は、Vue が単一選択、複数選択、逆選択、および全選択関数を実装する方法に関するものです (コードが添付されています)。必要な方は参考にしてください。お役に立てば幸いです。

ラジオ選択

v-for を使用して一連のデータをレンダリングする場合、それらを区別するためのインデックスを使用できます。ここでは、このインデックスを使用して単純にラジオ選択を実装します

0bd6836808e453d7044797e79f4db189{{item}}bed06894275b65c1ab86501b08a632eb

最初の選択肢は、selectedNum を定義することです。項目をクリックすると、selectedNum がクリックした項目のインデックスに変更され、各項目が追加されて、selectedNum がそれ自体と等しいかどうかが判断されます。等しい場合、その項目は選択されます。
各人が番号を持っているのと同じように、マウスをクリックすると当選番号が生成され、各人は当選番号が自分であるかどうかを判断できます。すごいですね〜

コードは次のとおりです。

data() {
    return {
      selectedNum:"",
      radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
    };
  },
methods: {
    //单选
    select(i) {
      this.selectedNum = i;
    },
  }

複数選択

複数選択の原理は単一選択の原理と同じですが、今回は単一の selectedNum ではなく配列を維持する必要があります

<li v-for="(item,index) in checkboxList" :key="item" :class="checkbox.includes(index)?&#39;active&#39;:&#39;&#39;" @click="check(index)">{{item}}</li>

インデックスも使用します~賞品ですが、今回は当選者が多いので、1 回クリックすると 1 人が当選します。当選者リストのチェックボックスにこの人のインデックスが表示されたら、その人が選ばれます~

コードは 1 回クリックして を押すことで書き込まれます。このチェックボックスにこのインデックスがある場合は、一度クリックして選択し、もう一度クリックしてキャンセルします。

//多选
    check(i){
      var idx = this.checkbox.indexOf(i);
      //如果已经选中了，那就取消选中，如果没有，则选中
      if(idx>-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    },

次に全選択、全解除、逆選択の実装について書いていきます。

//选中全部
checkAll(){
    //中奖的人就这么多，而且他们的index都是0到length-1的（v-for渲染），一顿数组基本操作即可
    var len = this.checkboxList.length;
    this.checkbox = [];
    for(var i=0;i311cd1cb4c7f915bb77f171abfb1a2fc-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    }
  }

多くの場合、全選択と全解除には 1 つのボタンだけが必要なので、完全に選択されているかどうかを判断する必要があります。計算済みですべてを選択するかどうかを自動的に計算します。

c93d9d746228ad54d582b9b52a1546f4{{isCheckAll?'取消全选':'选择全部'}}65281c5ac262bf6d81768915a4a77ac0

computed: {
    //判断是否全部选中
    isCheckAll(){
      if(this.checkbox.length==this.checkboxList.length){
        return true;
      }
      return false;
    }
  },

その後、このような関数をこの二重機能ボタンにバインドするだけです

letsGetThisFuckingCheck(){
//如果全选，就是清空选择；如果不是，那就全都安排一下
      if(this.isCheckAll){
        this.clearCheckbox();
      }else{
        this.checkAll()
      }
    },

完全なコード

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    e388a4556c0f65e1904146cc1a846bee单选框94b3e26ee717c64999d7867364b1b4a3
    ff6d136ddc5fdfeffaf53ff6ee95f185
      0bd6836808e453d7044797e79f4db189{{item}}bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689

    e388a4556c0f65e1904146cc1a846bee多选框94b3e26ee717c64999d7867364b1b4a3
    ff6d136ddc5fdfeffaf53ff6ee95f185
      37d349a997ba060025b794f498115081{{item}}bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
    c93d9d746228ad54d582b9b52a1546f4{{isCheckAll?'取消全选':'选择全部'}}65281c5ac262bf6d81768915a4a77ac0
    79162f310a08887208df5d3e33f513a3反选65281c5ac262bf6d81768915a4a77ac0
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  components: {},

  data() {
    return {
      selectedNum:"",
      radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
      checkbox:[],
      checkboxList:["某个元素", "某个元素", "某个元素", "某个元素", "某个元素","某个元素", "某个元素"],
    };
  },

  computed: {
    //判断是否全部选中
    isCheckAll(){
      if(this.checkbox.length==this.checkboxList.length){
        return true;
      }
      return false;
    }
  },

  methods: {
    //单选
    select(i) {
      this.selectedNum = i;
    },
    //多选
    check(i){
      var idx = this.checkbox.indexOf(i);
      //如果已经选中了，那就取消选中，如果没有，则选中
      if(idx>-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    },
    
    letsGetThisFuckingCheck(){
      if(this.isCheckAll){
        this.clearCheckbox();
      }else{
        this.checkAll()
      }
    },
    //选中全部
    checkAll(){
      var len = this.checkboxList.length;
      this.checkbox = [];
      for(var i=0;i363dfbc6f5fc95588c3de13971e480d8-1){
          this.checkbox.splice(idx,1);
        }else{
          this.checkbox.push(i);
        }
      }
    }
  }
};
2cacc6d41bbb37262a98f745aa00fbf0
c977fa5678fe78cf54b097005108eb8c
li{
  display: inline-block;
  font-size: 16px;
  padding: 5px;
  background-color: #e6e6e6;
  margin: 5px 10px;
  cursor: pointer;
}
.active {
  border: 2px solid red;
}
531ac245ce3e4fe3d50054a55f265927

関連する推奨事項:

vue を使用して全選択と逆選択関数を実装します

複雑さを実現しますjQueryに基づく marquee_jquery の全選択、全選択解除、逆選択関数

以上がvue は、単一選択、複数選択、すべての逆選択、およびすべての選択なしの機能をどのように実装しますか (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。