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. dijkstra之zkw线段树优化

    其实特别好理解,我们只要写一个数据结构(线段树)支持一下操作: 1.插入一个数\(x\). 2.查询当前数据结构中最小的数的插入编号. 3.删除插入编号为\(x\)的数. 第一眼看成可持久化了 其实就 ...

  2. I am coming..

    It's so great to start the blog here since it's been a long time that I want to start such kind of l ...

  3. 第四章 Python数据分析-描述性分析

    Python基础统计 统计函数:describe() 常用的统计指标函数: 统计函数 注释 (@数据分析-jacky) size 计算 sum 求和 mean 平均值 var 方差 std 标准差

  4. Python3 Address already in use 解决方法

    1.查看使用端口号netstat -ntlp 2.根据端口号找到pid 3.杀死程序 kill -9 pid 4.重新启动程序 简单粗暴 我使用python3时编写Socket,linux系统下使用c ...

  5. Java基础_线程的使用及创建线程的三种方法

    线程:线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 进程:进 ...

  6. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  7. gradle添加阿里云maven库

    用gradle构建spring项目,才发现gradle要添加阿里云maven库和maven不太一样 链接:https://www.cnblogs.com/SiriYang/p/10638365.htm ...

  8. word2vec原理与代码

    目录 前言 CBOW模型与Skip-gram模型 基于Hierarchical Softmax框架的CBOW模型 基于Negative Sampling框架的CBOW模型 负采样算法 结巴分词 wor ...

  9. 在matlab中读取trc文件

    用matlab的load()函数 1.相对路径读法(将文件放入'MATLAB\bin'目录): a = load('aizhenjiang_g10.trc') 2.绝对路径读法(任何位置) a = f ...

  10. 魔法方法 __slots__ 方法

    场景解析 网游的用户, 大量的用户本质都是类的实例化对象, 在线人数百万级时对内存是很大的挑战, 如何减少这部分的内存 方法解析 __slots__ 方法 取消默认的类实例中的  __dict__  ...