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. Linux+CLion+树莓派远程编译时,Cmake编译出现undefined reference to 'dlopen'的解决办法

    在Clion中链接讯飞的语音库并传至树莓派上编译时,出现如下错误. undefined reference to `dlopen' undefined reference to `dlclose' u ...

  2. shell tail 命令

    #显示最后两行 tail -n - filename > newfilename #从开头显示到倒数第二行 head -n - filename > newfilename

  3. LoadLibrary(C:\soft\IDA 7.0\IDA 7.0\plugins\python64.dll) error: 找不到指定的模块。 C:\soft\IDA 7.0\IDA 7.0\plugins\python64.dll: can't load file LoadLibrary(C:\soft\IDA 7.0\IDA 7.0\plugins\python64.dll) erro

    LoadLibrary(C:\soft\IDA 7.0\IDA 7.0\plugins\python64.dll) error: 找不到指定的模块. C:\soft\IDA 7.0\IDA 7.0\p ...

  4. Linux长格式文件属性介绍

    长格式文件属性 查看长格式文件命令:ll (或ls -l) (1)-:文件类型 -:普通文件 d:目录 b:块设备文件(随机读取) c:字符设备文件(顺序读取) p:管道文件 s:Socket套接字文 ...

  5. nginx实现动静分离的负载均衡集群

    实战: 一.源码编译安装nginx [root@tiandong63 ~]#yum groupinstall "Development Tools" "Developme ...

  6. HA 模式 Hadoop+ZooKeeper+Hbase启动顺序

    一. 背景(原http://blog.csdn.net/u011414200/article/details/50437356 ,对其进行了一定更改) 1.1 网络上的大部分教程 都是机器间含有SSH ...

  7. mybatis-puls 字段为null时候的更新问题

    在mybatis-puls重设置的全局更新策略 为null的字段忽略更新.但是在某些业务需求下面,可能需要某些字段更新为null值.那么改如何设置 1, 在你的实体属性上面单独添加需要更新nu l l ...

  8. vue中解决three.js出现内存泄漏丢失上下文问题

    在跳转页面时添加以上代码即可. 在spa项目中,跳转页面并不会清楚已经创建的webgl实例,需要手动清楚.

  9. TensorFlow错误ValueError: No gradients provided for any variable

    使用TensorFlow训练神经网络的时候,出现以下报错信息: Traceback (most recent call last):   File "gan.py", line 1 ...

  10. numpy基本方法总结

    NumPy基本方法 一.数组方法 创建数组:arange()创建一维数组:array()创建一维或多维数组,其参数是类似于数组的对象,如列表等 读取数组元素:如a[0],a[0,0] 数组变形:如b= ...