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. redis,memcached,mongodb之间的区别

    Redis Redis的优点: 支持多种数据结构,如 string(字符串). list(双向链表).dict(hash表).set(集合).zset(排序set).hyperloglog(基数估算) ...

  2. 在linux操作系统上进行简单的C语言源码的gcc编译实验

    尝试在linux上用gcc 而非封装完好的codeblocks,vs等ide 来编译c和cpp源程序 首先查看我的gcc版本,我的是VM centos 自带的,没有的话得自行安装,安装上gcc就可以在 ...

  3. Mybatis源码学习之DataSource(七)_1

    简述 在数据持久层中,数据源是一个非常重要的组件,其性能直接关系到整个数据持久层的性能.在实践中比较常见的第三方数据源组件有Apache Common DBCP.C3P0.Proxool等,MyBat ...

  4. Jmeter工具做接口测试

    一.安装Jmeter 1.安装JDK ①下载jdk,到官网下载jdk,地址:http://jmeter.apache.org/download_jmeter.cgi ② 安装jdk(Oracle官网下 ...

  5. Tomcat7修改根路径应用

    大家想必遇到过这样的问题,同台机器上跑上多个tomcat 那么随之更改文件的工作量就会增加 今天突然想到把所有的tomcat的根目录更改成一个文件 但是有不好的就的地方就是在更改文件的时候需要把这台机 ...

  6. Selenium Firefox 官方Webdriver -- Geckodriver

    下载地址: https://github.com/mozilla/geckodriver/releases 配置环境: 直接将解压的geckodriver.exe放到python的Scripts中 比 ...

  7. Dubbo系列(二)dubbo的环境搭建

    dubbo是一个分布式服务框架,提供一个SOA的解决方案.简单的说,dubbo就像在生产者和消费者中间架起了一座桥梁,使之能透明交互.本文旨在搭建一个可供使用和测试的dubbo环境,使用了spring ...

  8. Java通过过滤器修改header

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  9. 可插拔式后台管理系统(Django)

    1.实现效果 研究了下django admin的功能,自己实现了一个简单的可插拔式后台管理系统,方便自定义特殊的功能,而且作为一个独立单独的django app,可以整体拷贝到其他项目中作为后台数据管 ...

  10. leetcode-hard-array-149. Max Points on a Line -NO

    mycode  不会.... 参考 因为每次遍历一个点,也就是i的时候,都是新建的一个lines,所以也就是考虑了k相同b不同的情况 最后gcd函数就求最大公约数,来解决斜率精度的问题 class S ...