vue中关于checkbox数据绑定v-model指令

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'

                }

            },

浏览器渲染:


20180607152212885.jpg

上面可知,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:''
                }
            },

浏览器渲染:

20180607143645393.png

勾选为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:''
                }
            },

浏览器:


微信截图_20181020185231.png

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

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

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

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

其他的不变,依然是上面三个checkbox
神奇的一幕出来了
浏览器中:


微信截图_20181020185421.png

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

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

所以可以看到,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,善用对应布尔值控制勾选。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 早上终于回到了上塘,这个生活了多年的小镇。从前总觉得它又小又落后,总想着又一天能逃离这里,去大城市过不一样的生活。...
    馅儿皇后阅读 1,432评论 0 0
  • 今晚开始,每周六晚8点我开始在这里讲《周易》,如果有事耽搁会另行通知。讲课时可以就课题互动交流,但请不要发无关的内...
    丰铭2015阅读 3,966评论 1 2
  • 2018年9月1日,金九银十,美好的一个月刚刚开启,手板模型加工厂家-中北模型为这美好的一个月用一次大聚会拉开了帷...
    中北模型阅读 2,994评论 0 1
  • 2013年我上初中,对于一个什么也不会的学渣来说,每天上课必须做的事就是神游了。那时每天都在幻想我的高中生活会是怎...
    苇韫阅读 1,301评论 1 2

友情链接更多精彩内容