vue は、単一選択、複数選択、すべての逆選択、およびすべての選択なしの機能をどのように実装しますか (コード付き)-jsチュートリアル-php.cn

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

不言

リリース： 2018-09-08 17:50:08

オリジナル

7962 人が閲覧しました

この記事の内容は、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;
    },
  }

ログイン後にコピー

複数選択

複数選択の原理は単一選択の原理と同じですが、今回は単一の 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;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);
      }
    }
  }

ログイン後にコピー

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

<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>

ログイン後にコピー