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?
我自己在网上找了很久,没有发现一个特别清楚的解释,所以在这里发表一下自己的理解:
vue中关于checkbox数据绑定v-model指令的个人理解的更多相关文章
- vue中关于checkbox数据绑定v-model指令说明
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type="c ...
- vue中关于checkbox数据绑定v-model
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type=&qu ...
- vue中的双向数据绑定详解
前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- Vue中的双向数据绑定简单介绍
1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...
- 手写vue中v-bind:style效果的自定义指令
自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...
- 关于Vue中,checkBox等组件在赋值后,点击切换页面未及时更新问题
我们经常碰到这样的问题,在v-for循环中,给某些组件(此处以checkBox为例)赋值后,组件并不能正常切换, 这是因为数据层太多,render函数没有自动更新,需手动强制刷新. 解决方法:在切换c ...
- vue中优化CheckBox初始状态被选中问题
<template> <div class="hello"> <h2>我是主界面</h2> <!-- <h2>我是 ...
随机推荐
- vm安装ubantu的详细过程(转载)
这里转载一个非常实用的vm虚拟机安装linux系统的文章有需要的可以看下面链接: https://blog.csdn.net/u013142781/article/details/50529030
- No training required: Exploring random encoders for sentence classification(解析)
原文链接:https://arxiv.org/abs/1901.10444 发表在:ICLR 2019 ------------------------------------------------ ...
- 用xshell连接l自己的inux
有时候连接会提示失败(当然确保账号密码没错),这里需要安装一个服务,ssh服务器 1)ubuntu安装ssh服务器 sudo apt-get install openssh-server 2)出现问题 ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- inode,软硬链接
如何查看inode ll -di /boot / /app查看文件和文件夹的inode号 df -i查看挂载点文件夹的inode号 做inode增长实验 创建60万个文件的方法1(效率不高):for ...
- noi.ac NA529 【神树的矩阵】
表示今天一发A了这题拿了rk3...是个sb构造... 考虑除了\(n=1/m=1\)的情况,最小次数\(ans\)不会\(>3\). 对于\(n=1/m=1\),暴力即可. 然后考虑\(ans ...
- 【BZOJ1176】Mokia
题目大意:给定一个 N*N 的矩形,有 Q 次操作,每个操作可以是矩形单点修改或查询子矩形的权值和. 题解:CDQ分治适合处理修改操作之间互不影响且支持离线的题目. 满足以上操作条件的显然可以树套树来 ...
- idea中使用JRebel插件
首先 等待下载 点击Restart idea (重启idea) 然后等待idea 进行激活 记得勾选下面的那个复选框 激活url:http://139.199.89.239:1008/88414687 ...
- 【leetcode】1258. Synonymous Sentences
题目如下: Given a list of pairs of equivalent words synonyms and a sentence text, Return all possible sy ...
- laravel发送邮件模板中点击的链接url动态生成
邮件模板里有url链接,生成链接有三种方式(目前总结出这三种方式)这个链接可以是: http://www.xxx.com/active?id=xxx&token=xxx 这种形式是把url ...