vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见,

下面是最常见的例子:

<div id='myApp'>
    <input type="text" v-model="msg"><br>
    {{msg}}
 </div>
 

js里data初始化数据

<script src="./js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#myApp",
            data() {
                return {
                    msg:'hello'
                }
            },

浏览器渲染:

上面可知,v-model对应的数据为input的value属性

但是如果是checkbox,会有一点问题

 
<div id='myApp'>
    <input type="checkbox" v-model="msg"><br>
    {{msg}}
 </div>

没有给checkbox设置value属性

js中data为'':

new Vue({
            el: "#myApp",
            data() {
                return {
                    msg:''
                }
            },

浏览器渲染:

勾选为true,取消勾选为false

且data中msg如果初始化为true,则checkbox默认选中

到这里让人会有在checkbox里,v-model对应的值为true或false,似乎和checked属性有关

是不是这样呢,我们再来看一个例子:

<div id='myApp'>
   <input type="checkbox" v-model="msg" value="angular">angular<br>
   <input type="checkbox" v-model="msg" value="react">react<br>
   <input type="checkbox" v-model="msg" value="vue">vue<br>
   {{msg}}
 </div>

我们设置三个checkbox,分别设置value属性

js中依然

new Vue({
            el: "#myApp",
            data() {
                return {
                    msg:''
                }
            },

浏览器:

               

可以看到有了value属性,v-model 对应的msg 依然是true或false;

那么之前的猜想难道是正确的吗?

我们来改一点代码,通常v-model对应的都是字符串,这次我们初始化为空数组[]

    data() {
       return {
          msg:[]
        }
    },

其他的不变,依然是上面三个checkbox

神奇的一幕出来了

浏览器中:

可以看到,选中谁,谁的value就会添加到数组里,

且数据是双向绑定的,所以,当我们初始化数据的数组里赋予上面的value值时,所对应的checkbox便会默认选中

data() {
    return {
      msg:['vue']
    }
  },

浏览器渲染:

 

所以可以看到,checkbox里v-model对应的值依然是value,但是之前为什么是true或false?

我自己在网上找了很久,没有发现一个特别清楚的解释,所以在这里发表一下自己的理解:

    1.checkbox和普通input一样,点击勾选其实就是输入value,而输入value会改变checked属性,所以会选中
当v-model对应“字符串”时会解析“字符串”为布尔值,v-model对应有值或是true,checkbox都会选中。
    2.当v-model对应“数组”时有勾表示已选中,相当于赋值给,相当于有value,v-model对应value,
      没有value属性时,点勾相当于将('null')赋值给value——>v-model('null'为字符串),
      有value属性时,点勾相当于将(value)赋值给value——>v-model,
      注意数据是双向绑定的,所以数组里的值对应着checkbox的value——>v-model。
    3.处理表单,v-model一般都是对应字符串,所以处理checkbox的v-model,善用对应布尔值控制勾选。

vue中关于checkbox数据绑定v-model指令的个人理解的更多相关文章

  1. vue中关于checkbox数据绑定v-model指令说明

    vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type="c ...

  2. vue中关于checkbox数据绑定v-model

    vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'>     <input type=&qu ...

  3. vue中的双向数据绑定详解

    前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...

  4. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  5. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  6. Vue中的双向数据绑定简单介绍

    1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...

  7. 手写vue中v-bind:style效果的自定义指令

    自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...

  8. 关于Vue中,checkBox等组件在赋值后,点击切换页面未及时更新问题

    我们经常碰到这样的问题,在v-for循环中,给某些组件(此处以checkBox为例)赋值后,组件并不能正常切换, 这是因为数据层太多,render函数没有自动更新,需手动强制刷新. 解决方法:在切换c ...

  9. vue中优化CheckBox初始状态被选中问题

    <template> <div class="hello"> <h2>我是主界面</h2> <!-- <h2>我是 ...

随机推荐

  1. zabbix常见错误处理方式

    1.zabbix-server启动失败,我是centos7.4系统,查看/var/log/zabbix/zabbix_server.log日志显示 1516:20180816:195630.755 u ...

  2. linux 用户及文件权限管理

    Linux 是一个可以实现多用户登陆的操作系统,比如“李雷”和“韩梅梅”都可以同时登陆同一台主机,他们共享一些主机的资源,但他们也分别有自己的用户空间,用于存放各自的文件.但实际上他们的文件都是放在同 ...

  3. 2019 年百度之星·程序设计大赛 - 初赛一Game HDU 6669 (实现,贪心)

    Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  4. php + mysql 存储过程

    实例一:无参的存储过程$conn = mysql_connect('localhost','root','root') or die ("数据连接错误!!!");mysql_sel ...

  5. 百度网盘,FTP上传异常、上传失败的解决办法

    若你的宽带上传上限速度为50KB,那么将百度网盘或FTP的上行速度调为50KB以下即可,就不会出现网络异常的情况了.

  6. windows静态路由

    本机:192.168.1.10 本机网关:192.168.1.254 目的IP:188.1.1.10 指定网关:192.168.1.107 最多跳数:10跳 route  -p  add  188.1 ...

  7. 更新protobuf

    sudo pip install --upgrade protobuf sudo apt-get install libprotobuf-dev protobuf-compiler这个不知道是什么问题 ...

  8. SessionFactory的openSession与getCurrentSession区别

    SessionFactory 1 用来产生和管理sesssion 2 通常情况下,每个应用只需要一个SessionFactory,除非要访问多个数据库的情况 3 openSession()与openS ...

  9. centos 修改时区以及修正时间

    1.查看系统当前的时区 [app@127-0-0-1 shine]$ timedatectl Local time: Wed 2019-10-23 17:56:17 CST Universal tim ...

  10. 洛谷 P2820 局域网x

    题目背景 某个局域网内有n(n<=100)台计算机,由于搭建局域网时工作人员的疏忽,现在局域网内的连接形成了回路,我们知道如果局域网形成回路那么数据将不停的在回路内传输,造成网络卡的现象.因为连 ...