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. 计算(calc.cpp) 这题我搞了2晚上qwq

    终于会了!可喜可贺!可喜可贺!   计算(calc.cpp) [问题描述] 小明在你的帮助下,破密了Ferrari设的密码门,正要往前走,突然又出现了一个密码门,门上有一个算式,其中只有“(”,“)” ...

  2. 白鹭引擎EUI做H5活动 巩固篇

    项目目录 上面这张图片是项目的目录结构,咋们一点一点来讲解: .wing:包括 Egret 项目的任务配置文件和启动配置文件. wingProperties.json:Egret Wing 项目配置文 ...

  3. 在debian下安装QT 5.10 32位

    准备工作: 在开始之前最好把GCC升级到5.0以上. 如果升级后出现“libstdc++.so.6: version `CXXABI_1.3.9' not found”错误,可以参考https://b ...

  4. mysql数据库文件的真实的物理存储位置

    在MySQL客户端输入如下命令:show global variables like "%datadir%"; 一定要在最后加上英文的分号.

  5. Mac下mysql服务端密码重置及环境配置

    一 停止mysql服务 关闭MySQL服务的操作: 苹果->系统偏好设置->最下边点MySQL 在弹出页面中 关闭mysql服务(点击stop mysql server) 二 进入终端,命 ...

  6. docker 管理应用程序数据和网络管理

    Volume和Bind Mount Docker提供三种不同方式将数据从宿主机挂载到容器中:volumes,bind mounts和tmpfs volumes:Docker管理宿主机文件系统的一部分( ...

  7. 【Makefile】Makefile的自动化变量$@、$^ 、$<等

    所谓自动化变量,就是这种变量会把“模式”中所定义的一系列的文件自动地挨个取出,直至所有的符合模式的文件都取完了.这种自动化变量只应出现在规则的命令中. $@ 表示规则中的目标文件集.在模式规则中,如果 ...

  8. JAVA正则表达式 Pattern和Matcher类

    java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 1.简介:  java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. ...

  9. Js 监听器

    在Ajax取数据时,采用$("#id").click(function(){})的方式不能正确设置监听,需要用$("#parent").on("cli ...

  10. SPRINGMVC 视图介绍

    SpringMVC视图解析器 前言 在前一篇博客中讲了SpringMVC的Controller控制器,在这篇博客中将接着介绍一下SpringMVC视图解析器.当我们对SpringMVC控制的资源发起请 ...