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

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

ラジオ選択

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

<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?&#39;active&#39;:&#39;&#39;" @click="select(index)">{{item}}</li>

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

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

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

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

コードは 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;i<len;i++){
      this.checkbox.push(i);
    }
  },
//清空选择
clearCheckbox(){
  this.checkbox = [];
  },
//反选
checkOpposite(){
    var len = this.checkboxList.length;
    var idx;
    for(var i=0;i<len;i++){
      idx = this.checkbox.indexOf(i)
      //已经选中的删去，没选中的加进去
      if(idx>-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    }
  }

<button @click="letsGetThisFuckingCheck">{{isCheckAll?&#39;取消全选&#39;:&#39;选择全部&#39;}}</button>

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

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

<script>
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&gt;-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;i<len;i++){
        this.checkbox.push(i);
      }
    },
    //清空选择
    clearCheckbox(){
      this.checkbox = [];
    },
    //反选
    checkOpposite(){
      console.log(1)
      var len = this.checkboxList.length;
      var idx;
      for(var i=0;i<len;i++){
        idx = this.checkbox.indexOf(i)
        //已经选中的删去，没选中的加进去
        if(idx>-1){
          this.checkbox.splice(idx,1);
        }else{
          this.checkbox.push(i);
        }
      }
    }
  }
};
</script>

ログイン後にコピー

関連する推奨事項:

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

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

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