vue는 단일 선택, 다중 선택, 모두 역선택 및 모두 선택 안 함(코드 포함) 기능을 어떻게 구현합니까?-JS 튜토리얼-php.cn

vue는 단일 선택, 다중 선택, 모두 역선택 및 모두 선택 안 함(코드 포함) 기능을 어떻게 구현합니까?

不言

풀어 주다： 2018-09-08 17:50:08

원래의

7940명이 탐색했습니다.

이 글의 내용은 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;
    },
  }

로그인 후 복사

객관식

다중 선택의 원리는 단일 선택과 동일하지만 이번에는 단일 선택이 아닌 배열을 유지해야 합니다Num

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

로그인 후 복사

인덱스도 사용합니다~ 상품을 선택하는 사람은 같지만 이건 당첨된 사람이 많을 때 한 번 클릭하면 한 사람이 당첨됩니다. 이 사람의 인덱스가 당첨 목록 체크박스에 나타나면 그 사람이 선택됩니다~
한 번 클릭하고 인덱스를 체크박스에 밀어 넣으면 코드가 작성됩니다. 확인란에 이 색인이 있으면 한 번 클릭하여 선택하고 다시 클릭하여 취소하세요.

//多选
    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>

로그인 후 복사