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. 转：Awesome Vulnerability Research

    转:https://github.com/re-pronin/Awesome-Vulnerability-Research Awesome Vulnerability Research 

  2. 货币金额javascript正则表达式

    最多保留两位小数,货币金额(不能为0): /^(([1-9]\d*)(\.\d{1,2})?)$|^(0\.0?([1-9]\d?))$/

  3. 【剑指offer】9、斐波拉契数列

    面试题9.斐波拉契数列 题目: 输入整数n,求斐波拉契数列第n个数. 思路: 一.递归式算法: 利用f(n) = f(n-1) + f(n-2)的特性来进行递归,代码如下: 代码: long long ...

  4. leetcode104 Maximum Depth

    题意:二叉树最大深度 思路:递归,但是不知道怎么回事直接在return里面计算总是报超时,用俩变量就可以A···奇怪,没想通 代码: int maxDepth(TreeNode* root) { if ...

  5. 安装SQL2008时显示必须重启计算机才可以继续安装的错误—解决办法

    数据库学习已经有一段时间了,前几天进入了SQL视频的学习,在安装数据库的时候,出现问题,总显示重启失败 ,无法继续安装,如图所示 出现这种问题 ,应该如何解决呢? 解决方法如下: (1).开始菜单-搜 ...

  6. BZOJ 2395 [Balkan 2011]Timeismoney（最小乘积生成树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2395 [题目大意] 给出一张无向图,每条边上有a,b两个值,求生成树, 使得suma* ...

  7. 用flask开发个人博客（26）—— 利用config.py配置文件动态的创建不同的Flask对象

    原文:https://blog.csdn.net/hyman_c/article/details/52877704 对配置进行封装的目的是根据不同的使用场景,给flask的app赋予不同的config ...

  8. 邮件发送javamail

    写在前面: 最近要将dms系统原始发邮件的功能(调用的webservice)改变成使用smtp服务来发送邮件(使用javamail来发送),这里简单记录下,方便日后有用到,直接拿来用即可. 首先导入需 ...

  9. [转]tx:advice标签简介

    <Spring高级程序设计>第16章事务管理,通过本章的学习,你知道了如何使用Spring去管理事务,而这种方式几乎不会对你的源代码产生任何影响.你现在知道了如何使用本地和全局事务,并知道 ...

  10. 剖析ASP.NET Core（Part 3）- UseMvc（译）

    原文:https://www.stevejgordon.co.uk/asp-net-core-anatomy-part-3-addmvc 发布于:2017年4月环境:ASP.NET Core 1.1 ...