浅谈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 鼠标拖动图标技术
Feb 07 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue实现井字棋游戏
Sep 29 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
自动分页的不完整解决方案
2007/01/12 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
python生成词云的实现方法(推荐)
2017/06/13 Python
基于python 字符编码的理解
2017/09/02 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python开发游戏的前期准备
2019/05/05 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
宿舍违规检讨书
2014/01/12 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
初一英语教学反思
2016/02/15 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫