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>

  • 相关阅读:
    C语言寒假大作战01
    C语言I作业12—学期总结
    C语言I博客作业11
    C语言I博客作业10
    浅谈js模块加载方式(初级)
    浅谈.net的后台校验
    api接口访问限制
    系统操作日志表单形式构建
    RedisUtil(未完,持续更新中....)
    定时处理组件---Quartz.net
  • 原文地址:https://www.cnblogs.com/time1997/p/12332028.html
Copyright © 2011-2022 走看看