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. [pytorch] PyTorch Hook

      PyTorch Hook¶ 为什么要引入hook? -> hook可以做什么? 都有哪些hook? 如何使用hook?   1. 为什么引入hook?¶ 参考:Pytorch中autogra ...

  2. JavaWeb_(Hibernate框架)Hibernate中数据查询语句Criteria基本用法

    Criteria进行数据查询与HQL和SQL的区别是Criteria完全是面向对象的方式在进行数据查询,将不再看到有sql语句的痕迹,使用Criteria 查询数据包括以下步骤: 1. 通过sessi ...

  3. Golang使用RabbitMQ消息中间件amqp协议

    "github.com/streadway/amqp" Publish发布 // amqp://<user>:<password>@<ip>:& ...

  4. swoole入门简介

    原文:https://www.cnblogs.com/dormscript/p/4811921.html 本文主要记录一下学习swoole的过程.填过的坑以及swoole究竟有多么强大! 首先说一下对 ...

  5. chrome中如何查看元素的hover事件

    chrome中如何查看元素的hover事件 一.总结 一句话总结: Elements->Styles里面可以看到":hov":点开选择":hover"就可 ...

  6. Qt事件机制浅析

    Qt事件机制 Qt程序是事件驱动的, 程序的每个动作都是由幕后某个事件所触发.. Qt事件的发生和处理成为程序运行的主线,存在于程序整个生命周期. Qt事件的类型很多, 常见的qt的事件如下: 键盘事 ...

  7. 微pe安装原版win10怎么装|wepe安装原版win10 1803教程

    http://www.xitongcheng.com/jiaocheng/xtazjc_article_42199.html 怎么制作wepe启动盘?微pe是一款全新高效.多功能pe维护工具箱,同时支 ...

  8. JVM源码分析之JDK8下的僵尸(无法回收)类加载器[z]

    [z]http://lovestblog.cn/blog/2016/04/24/classloader-unload/ 概述 这篇文章基于最近在排查的一个问题,花了我们团队不少时间来排查这个问题,现象 ...

  9. Linux下的C的开发之GCC的初级使用

    <span style="font-family: Arial, Helvetica, sans-serif; "><span style="white ...

  10. JAVA与c#中byte取值范围的差异

    C#中分有符号类型的sbyte和无符号类型的byte Console.WriteLine("byte.min:{0},byte.max:{1},{2}byte", byte.Min ...