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

浏览器渲染：

上面可知，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，善用对应布尔值控制勾选。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue在自定义组件中使用v-model进行数据绑定的方法

    本文介绍了vue v-model进行数据绑定,分享给大家,具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <p class="parent"> <p>我是父亲, 对儿

  • vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能.分享给大家供大家参考,具体如下: v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器. 不然会不生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vu

  • 浅谈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

  • 浅谈vue中$bus的使用和涉及到的问题

    Hello大家周末好,最近项目比较忙所以没有及时的更新抱歉,今天给大家讲一vue.bus.使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到(每一个领域都是会有坑的呀). 1:创建$bus文件 创建一个文件内容如下: import Vue from 'vue' export default new Vue(); 2:引入$bus main.js: import Bus from './views/bus/bus'; Vue.prototype.$bus = Bus;

  • 浅谈jQuery中的checkbox问题

    一开始的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框</title> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script t

  • 浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)

    我这里往后端传递checkbox 多选框value的值是通过字符串方式传递,先调用js对选定checkbox遍历获取选的的boxvalue,然后写进隐藏域,最后作文对象的属性提交.见代码:` 前端: <form:form commandName="user" method="post"> <c:forEach items="${deploys}" var="deploy" varStatus="de

  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.

  • 浅谈Vue中render中的h箭头函数

    vue2.0新增了render方法,官方案例写的是: render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是:(只有一个个return语句,可以省略return和{}) render: createElement=>createElement(app) 将createElement改成 h 就是官方写法. 使用 h 的理由,

  • 浅谈vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)

  • 浅谈vue中document.getElementById()拿到的是原值的问题

    问题 两个界面都有id="test"的div,内容不同,路由切换的时候document.getElementById()拿到的是原界面的值. 问题代码 // 页面1 <div id="test">aaa</div> // 页面2 <div id="test">bbb</div> // 路由切换如下: <transition name="card-fade"> <

  • 浅谈vue中使用编辑器vue-quill-editor踩过的坑

    结合vue+element-ui+vue-quill+editor二次封装成组件 1.图片上传 分析原因 项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差. 引入element-ui 编辑editor.vue文件 <template> <div> <

  • 浅谈vue中get请求解决传输数据是数组格式的问题

    qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的复数格式,因此indices是索引的意思 //bracket是括号的意思,因此arrayFormat:'brackets'代表数组下标为空[] qs.stringify({ arr: [1,2,3] }, { indices: false }) //arr=1&arr=2&arr=3 qs.s

随机推荐