1. v-model：监听表单（input,textarea,selector）value.

2. label不知道你有没有这样的体验，我明明没有点用户名输入框，而仅仅是点了“用户名”三个字，然后就直接到了用户名的输入框聚焦.

3. label和label for 有什么关系吗? label包括起来和label for 效果是一样的，后者采用id 作为绑定.

我相信，聪明的你已经看出来了.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <!-- Step1.对于vue,可以用cdn -->

     <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

     <style>

         #app div{

             padding: 2%;

             margin-bottom: 1%;

             border-bottom: 1px solid #ddd;

             background-color: blanchedalmond;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <div id='example-3'>

             <label>

                 <input type="checkbox" v-model="checkedNames" value="Jack">Jack

             </label>

             <input type="checkbox" id="john" value="John" v-model="checkedNames">

             <label for="john">John</label>

             <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

             <label for="mike">Mike</label>

             <br>

             <span>Checked names: {{ checkedNames }}</span>

         </div>

     </div>

     <script type="text/javascript">

         new Vue({

             el: '#example-3',

             data: {

                 checkedNames: []

             }

         })

     </script>

 </body>

 </html>

vue -model的更多相关文章

  1. vuex的简单例子和vue model组件

    好久没用过vuex了,vuex官方示例的计算器counter是用的webpack打包了单文件组件,不方便回顾,今天把代码改成了html引人的方式,方便回顾 <!DOCTYPE html> ...

  2. vue model双向绑定

    view <div id='demo' class="container"> <input type="text" v-model='name ...

  3. 使用 Vue + TypeScript 时项目中常用的装饰器

    目录 一.@Component 装饰器 1)父组件 2)子组件 二. @Emit 装饰器 1)父组件 2)子组件 三. @Model 装饰器 1)父组件 2)子组件 四. @Prop 装饰器 1)父组 ...

  4. python工业互联网应用实战18—前后端分离模式之jquery vs vue

    前面我们分三章来说明了使用django template与jquery的差别,通过jquery如何来实现前后端的分离,同时再9章节使用vue.js 我们浅尝辄止的介绍了JQuery到vue的切换,由于 ...

  5. vue-property-decorator用法

    vue-property-decorator这个库完全依赖于vue-class-component,所以在使用这个库之前请先阅读它, 不管啥反正都是装饰器而已 vue-property-decorat ...

  6. 装饰器vue-property-decorator

    接触到了新的vue项目,使用vue+ts+vue-property-decotator来进行项目的简化,一时间语法没有看懂,所以花时间学习这个装饰器的包. 1.装饰器 @Component(optio ...

  7. asp.net ajax传递Json给aspx.cs后台 webmethod方法传递json

    1.提取一个向后台写入数据的方法 ///向后台cs页面请求数据的方法 function myPost(url,data,func) { $.ajax({ type: "post", ...

  8. 【心无旁骛】vue-ts-daily

    这是一个非常有意思的项目,我们先来看看效果 这个项目所用的技术也比较有意思,它的技术栈为vue2.5 + Typescript + vuex + vue-router 放下博主的项目地址吧,https ...

  9. 如何结合整洁架构和MVP模式提升前端开发体验（二） - 代码实现篇

    上一篇文章介绍了整体架构,接下来说说怎么按照上图的分层结构实现下面的增删改查的功能. 代码结构 vue userManage └── List ├── api.ts ├── EditModal │ ├ ...

随机推荐

  1. JS中==与===操作符的比较

    摘要: ===操作符: 要是两个值类型不同,返回false 要是两个值都是number类型,并且数值相同,返回true 要是两个值都是stirng,并且两个值的String内容相同,返回true 要是 ...

  2. 洛谷P3369普通平衡树（Treap）

    题目传送门 转载自https://www.cnblogs.com/fengzhiyuan/articles/7994428.html,转载请注明出处 Treap 简介 Treap 是一种二叉查找树.它 ...

  3. Spring MVC源码——Root WebApplicationContext

    目录 Spring MVC源码--Root WebApplicationContext 上下文层次结构 Root WebApplicationContext 初始化和销毁 ContextLoaderL ...

  4. 如何用jmeter对websockt和protobuf进行压力测试

    参考代码:https://github.com/hutao722/kekexinxin 这是基于Jmeter WebsocketSampler的插件,支持对基于websocket和protobuf的服 ...

  5. 自定义word快捷键，设置插入图片快捷键

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 自定义word快捷键,设置插入图片快捷键 文件→选项→自定义功能区 选择键盘快捷方式 自 ...

  6. qsc round#2 喵哈哈村的排队（本辣鸡想七想八的，特写此博文给自己一个提醒）

    该oj是qsc自己写的比赛,友情链接:http://qscoj.cn/ 喵哈哈村的排队 发布时间: 2017年2月26日 16:13   最后更新: 2017年2月26日 16:14   时间限制: ...

  7. BZOJ 1115 [POI2009]石子游戏Kam（阶梯博弈）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1115 [题目大意] 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数. ...

  8. JVM堆 栈 方法区详解

    一.栈 每当启用一个线程时,JVM就为他分配一个JAVA栈,栈是以帧为单位保存当前线程的运行状态 栈是由栈帧组成,每当线程调用一个java方法时,JVM就会在该线程对应的栈中压入一个帧 只有在调用一个 ...

  9. Ubuntu 16.04安装RabbitMQ（单机版）

    说明: 1.如果是做RabbitMQ方面的开发时,建议先不要了解集群的安装和部署,先安装一个单机版之后,尽快的熟悉里面的功能和特性.毕竟单机版支持的QPS相当的高.同样,集群方式也没有想象中的多点复制 ...

  10. 【转】记录PHP、MySQL在高并发场景下产生的一次事故

    看了一篇网友日志,感觉工作中值得借鉴,原文如下: 事故描述 在一次项目中,上线了一新功能之后,陆陆续续的有客服向我们反应,有用户的个别道具数量高达42亿,但是当时一直没有到证据表示这是,确实存在,并且 ...