zoukankan      html  css  js  c++  java
  • checkbox在vue中的使用

    效果图:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">

    </head>
    <body>
    <div id="app" v-cloak>
    <div>
    <span>复选框:</span>=={{checkboxIdStr}}
    <br>
    <label v-for="(item,index) in tempData">
    <input type="checkbox" :value="item.id" v-model="checkboxIdStr">{{item.name}}

    <!--方式二 选中1 不选中0-->

    <input  v-model="isQRCodeTrack" :true-value="1":false-value="0"  id="isQRCodeTrack"  type="checkbox">


    </label>
    </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
    var vue=new Vue({
      el:"#app",
      data:{

        isQRCodeTrack:null,

        tempData:[{'id':'1','name':'张三'},{'id':'2','name':'李四'},{'id':'3','name':'王五'}],//复选框数据源

        checkboxIdStrs:'1,3',//假设这是你从数据库里取出的数据

        checkboxIdStr:[],//注意这个一定要是数组的形式,这样v-model绑定ckeckbox才会自动选中

      },

     created: function () {
      if (this.checkboxIdStrs.length>0) {

        const arr=this.checkboxIdStrs.split(',');
          for (let i in arr) {
         
      this.checkboxIdStr.push(arr[i]);
      }
      }

    }

    })
    </script>
    </body>
    </html>

  • 相关阅读:
    vbScript首字拼音查询
    C#读取U盘序列号
    下拉 回车 筛选
    Oracle的汉字转拼音首字母的函数
    sql 触发器禁止和启用
    List.FindAll 方法
    MyControl 常用操作
    List.Find 方法
    regsvr32 C:\WINDOWS\system32\cell32.ocx
    2222222
  • 原文地址:https://www.cnblogs.com/time1997/p/12332028.html
Copyright © 2011-2022 走看看