vue经典思想(排他思想,全选框思想)

1.排他思想

   /* 排他思想 ： 多个元素只能选中一个（多选一）

      1.以前dom思维 ： DOM操作

          (1)使用选择器找到当前选中的元素，移除类名

          (2)给自己添加类名

      2.vue思维 : 数据驱动(数据+指令)

          (1)给data添加一个变量currentIndex记录当前选中的下标

          (2)使用v-bind指令绑定样式

          (2)点击元素修改

      */

 

  
  
  
  
  
  
  



  
  

    {{item}}
  

  

2.全选框思想

全选框思想是对于true和false的操作

注意点表单的双向绑定 v-model="item.select" 当表单的v-true值改变的时候 数组的v-true随之改变 另外当数组中的v-true值改变 表单v-true值也随之改变 (简单来说就是打钩)

 1.// every: 判断数组中是否每一个元素都满足条件

2. // 修改数组每一个元素的select值 为 value

  
  
  
  
  
  




  
  

    全选
    

      

         {{ item.name }}