vue之 watch监听数据变化

1.单选

 <ul>
        <li 
            v-for="item,index in cites"
            class="item"
            :class="{'checked' : index == n }"
            @click='choose(index)'>{{ item.name }}</li>
</ul>
<script>
export default {
  data(){
      return{
          checked:true,
          cites:[
              {name:'成都',checked:false},
              {name:'北京',checked:false},
              {name:'上海',checked:false},
              {name:'重庆',checked:false},
              {name:'天津',checked:false}
          ],
          //下标控制index的class变化
          n:0
      }
  },
  methods:{
      choose(index){
          //控制n的值，变为用户的选中
          this.n = index;
      }
  }
}
</script>
<style>
.item{
    float: left;
    width: 50px;height: 50px;
    border: 1px solid #e5e5e5;
    list-style: none;
    text-align: center;
    line-height: 50px;
    margin: 10px;
    border-radius: 5px;
}
.checked{
    background-color:blanchedalmond;
}
</style>

2.多选

<ul>
     <li 
         v-for="item,index in cites"
         class="item"
         :class="{'checked' : n.includes(index) }"
         @click='choose(index)'>{{ item.name }}</li>
 </ul>
 <script>
export default {
  data(){
      return{
          checked:true,
          cites:[
              {name:'成都',checked:false},
              {name:'北京',checked:false},
              {name:'上海',checked:false},
              {name:'重庆',checked:false},
              {name:'天津',checked:false}
          ],
          //下标控制index的class变化
          n:[]
      }
  },
  methods:{
      choose(index){
          //控制n的值，变为用户的选中
          //判断当前index是否在n中
          if( this.n.includes(index) ){
              this.n = this.n.filter( v => v != index)
          }else{
              this.n.push(index);
          }
      }
  }
}
</script>

3.方法三，数据结构的改变

 <ul>
    <li 
         v-for="item,index in cites"
         class="item"
         :class="{ 'checked': item.checked }"
         @click='choose(item)'>{{ item.name }}</li>
 </ul>
 <script>
export default {
  data(){
      return{
          checked:true,
          cites:[
              {name:'成都',checked:false},
              {name:'北京',checked:false},
              {name:'上海',checked:false},
              {name:'重庆',checked:false},
              {name:'天津',checked:false}
          ],
      }
  },
  methods:{
      choose(item){
          //控制n的值，变为用户的选中
          //判断当前index是否在n中
            item.checked  = !item.checked;
      }
  }
}
</script>