vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见,

下面是最常见的例子:

<div id='myApp'>
  <input type="checkbox" v-model="msg">angular<br>

{{msg}}
</div>

<script>

new Vue({
el: "#myApp",
data: {
msg:‘’
}
}
)
</script>

浏览器渲染:

          

勾选为true,取消勾选为false    

且data中msg如果初始化为true,则checkbox默认选中   

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

<script>

new Vue({
el: "#myApp",
data: {
msg:[]
}
}
)
</script>

浏览器渲染:

vue中关于checkbox数据绑定v-model指令说明的更多相关文章

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

    vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'>     <input type=&qu ...

  2. vue中关于checkbox数据绑定v-model

    vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'>     <input type=&qu ...

  3. vue中的双向数据绑定详解

    前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...

  4. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  5. Vue中的双向数据绑定简单介绍

    1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...

  6. 手写vue中v-bind:style效果的自定义指令

    自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...

  7. 关于Vue中,checkBox等组件在赋值后,点击切换页面未及时更新问题

    我们经常碰到这样的问题,在v-for循环中,给某些组件(此处以checkBox为例)赋值后,组件并不能正常切换, 这是因为数据层太多,render函数没有自动更新,需手动强制刷新. 解决方法:在切换c ...

  8. vue中优化CheckBox初始状态被选中问题

    <template> <div class="hello"> <h2>我是主界面</h2> <!-- <h2>我是 ...

  9. Vue中Object和Array数据变化侦测原理

    在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...

随机推荐

  1. 洛谷——P2058 海港

    题目传送 由于于题目保证输入的ti是递增的,所以发现当我们统计完一艘船的答案后,这个答案多少会对下一艘船的答案有贡献.同时还发现如果对每个艘船都记录他的乘客在整个数据出现的所有国籍中相应出现的次数,在 ...

  2. Codeforces 1205C Palindromic Paths (交互题、DP)

    题目链接 http://codeforces.com/contest/1205/problem/C 题解 菜鸡永远做着变巨的梦 然而依然连div1BC题都不会做 要是那天去打cf怕是又要1题滚粗了.. ...

  3. 【APUE】第3章 文件I/O (2) 函数creat、lseek、read、write使用说明

    1.函数creat 可以使用creat函数创建一个新文件. #include<fcntl.h> int creat(const char *path, mode_t mode); 返回值: ...

  4. Leetcode题目160.相交链表(简单)

    题目描述 编写一个程序,找到两个单链表相交的起始节点. 如下面的两个链表: 在节点 c1 开始相交. 输入:intersectVal = 8, listA = [4,1,8,4,5], listB = ...

  5. Linux设备驱动程序 之 并发及其管理

    竞态产生 Linux系统找那个存在大量的并发联系,因此会导致可能的竞态: 1. 正在运行的用户空间进程可以以多种组合方式访问我们的代码: 2. SMP系统甚至可以再不同的处理器上同时执行我们的代码: ...

  6. KERNEL_SECURITY_CHECK_FAILURE

    出现错误提示重装系统可以解决问题,但不需要重装系统.win8错误提示:KERNEL_SECURITY_CHECK_FAILURE提示对应错误代码:0x00000139 (0x00000003, 0x8 ...

  7. 在HearthRanger中使用Silverfish

    I'm new here and have never used this bot before. But a few days ago I tried it and I liked it :) I ...

  8. IDEA 运行单元测试报错 @{argLine}

    sentinel是今年阿里开源的高可用防护的流量管理框架. git地址:https://github.com/alibaba/Sentinel wiki:https://github.com/alib ...

  9. http2.0多路复用

    http/1中的每个请求都会建立一个单独的连接,除了在每次建立连接过程中的三次握手之外,还存在TCP的慢启动导致的传输速度低.其实大部分的http请求传送的数据都很小,就导致每一次请求基本上都没有达到 ...

  10. 【SR汇总】效果对比

    算法时间效率 -见 https://www.cnblogs.com/wxl845235800/p/10826957.html 1.SRCNN <Learning a Deep Convoluti ...