zoukankan      html  css  js  c++  java
  • VUE的踩坑日记(1)

    <section class="box">
         <label  :for="item3" @click="chooseType($event,index3)"  v-for="(item3,index3) in type"  class="labelName">
            <input type="checkbox" :value="item3" :id="item3" v-model="checkedValue" class="checkboxList">            // for属性一定要与id一致,原因请看上图
            <div class="name">{{item3}}</div>  // label的值            // checkbox的v-model绑定值一定要是数组
            &nbsp;&nbsp;
            {{checkedValue}}   // 查看值
         </label>
         <button @click="chooseQu">全选</button>
         <button @click="chooseNo">全不选</button>
    
      </section>

     data: 

    data(){
            return{
              checkedValue: [],
              type:['a','b','c','d']   // 测试数据,可在mounted钩子函数中将后台数据赋值
            }
    },

    methods:

    methods:{
            chooseType(e,val){
              console.log(e.target.checked)   // 可获取当前的checked 状态
              console.log(val)                // 可获取到当前的下标。
    
            },
            chooseQu(){
              // document.querySelectorAll('.checkboxList').setAttribute("checked","true");
              this.checkedValue = this.type ;  //将原数据全部赋值给checkedValue,全部置为true.  
            },
            chooseNo(){
              this.checkedValue = [] ;    // checkedValue 为空即将checkedValue全部置为false,
            }
    
      }
  • 相关阅读:
    Java LinkList遍历方式
    Java LinkedList的实现原理
    ArrayList 原理(2)
    ArrayList 原理(1)
    Java中HashMap的实现原理
    Java HashMap两种遍历方式
    【转】Unity3d:读取FBX中的动画
    C#与U3D中字符串尾0
    U3D中的又一个坑
    MaxScript 学习笔记【有转载】
  • 原文地址:https://www.cnblogs.com/Ai-Dou/p/14986091.html
Copyright © 2011-2022 走看看