浅谈vue中关于checkbox数据绑定v-model指令的个人理解


Posted in Javascript onNovember 14, 2018

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'
                }
            },

浏览器渲染:

    浅谈vue中关于checkbox数据绑定v-model指令的个人理解

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

浏览器渲染:

浅谈vue中关于checkbox数据绑定v-model指令的个人理解          

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

浏览器:

浅谈vue中关于checkbox数据绑定v-model指令的个人理解       浅谈vue中关于checkbox数据绑定v-model指令的个人理解        浅谈vue中关于checkbox数据绑定v-model指令的个人理解

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

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

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

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

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

神奇的一幕出来了

浏览器中:

浅谈vue中关于checkbox数据绑定v-model指令的个人理解浅谈vue中关于checkbox数据绑定v-model指令的个人理解浅谈vue中关于checkbox数据绑定v-model指令的个人理解

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

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

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

浏览器渲染:

 浅谈vue中关于checkbox数据绑定v-model指令的个人理解

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jquery ready函数源代码研究
Dec 06 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
js实现导航跟随效果
Nov 17 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
js html实现计算器功能
Nov 13 #Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 #Javascript
小程序登录态管理的方法示例
Nov 13 #Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 #Javascript
vue代码分割的实现(codesplit)
Nov 13 #Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 #Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 #Javascript
You might like
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
js word表格动态添加代码
2010/06/07 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python解释执行原理分析
2014/08/22 Python
python装饰器初探(推荐)
2016/07/21 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python使用gRPC传输协议教程
2018/10/16 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
村官学习十八大感想
2014/01/15 职场文书
师恩难忘教学反思
2014/04/27 职场文书
先进员工获奖感言
2014/08/14 职场文书
继承权公证书范本
2015/01/23 职场文书
合作与交流自我评价
2015/03/09 职场文书
关于观后感的作文
2015/06/18 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
月考总结与反思
2015/10/22 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis