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. vmware漏洞之三——Vmware虚拟机逃逸漏洞（CVE-2017-4901）Exploit代码分析与利用

    本文简单分析了代码的结构.有助于理解. 转:http://www.freebuf.com/news/141442.html 0×01 事件分析 2017年7月19 unamer在其github上发布了 ...

  2. Android基本概念总结

    Android工程师 源码开发(手机定制软件) 系统开发(驱动 系统软件) 应用开发 (单机 联网 游戏 应用) 一.Android应用程序的组成部分 Activity Activity 应用程序的表 ...

  3. 挑战python 之一马当先(python的广搜)

    下过象棋的人都知道,马只能走'日'字形(包括旋转90°的日),现在想象一下,给你一个n行m列网格棋盘, 棋盘的左下角有一匹马,请你计算至少需要几步可以将它移动到棋盘的右上角,若无法走到,则输出-1. ...

  4. nodemon 基本配置与使用

    在开发环境下,往往需要一个工具来自动重启项目工程,之前接触过 python 的 supervisor,现在写 node 的时候发现 supervisior 在很多地方都有他的身影,node 也有一个 ...

  5. [NOI2015]小园丁与老司机(DP+上下界最小流)

    由于每行点的个数不超过1000,所以行内DP可以使用$O(n^2)$算法. 先找到每个点所能直接到达的所有点(x,y,x+y或x-y相同),用排序实现. 第一问:以行为阶段,对于每行,暴力枚举最有路径 ...

  6. 【bzoj1594】猜数游戏

    1594: [Usaco2008 Jan]猜数游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 556  Solved: 225 Descripti ...

  7. [CF985G]Team Players

    题意:给出一个图,求$\sum\limits_{\substack{i\lt j\lt k\\\nexists(i,j),(j,k),(i,k)}}Ai+Bj+Ck$ 挺好的一道题==,就是稍微毒了点 ...

  8. 【前缀和】【枚举倍数】 Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) D. Arpa and a list of numbers

    题意:给你n个数,一次操作可以选一个数delete,代价为x:或者选一个数+1,代价y.你可以进行这两种操作任意次,让你在最小的代价下,使得所有数的GCD不为1(如果全删光也视作合法). 我们从1到m ...

  9. 【拓扑排序】【bitset】Gym - 101128A - Promotions

    给你一张DAG,若选择u点,则必须先选择所有能到达其的点.问你在选择A个点的情况下,哪些点必选:选择B个点的情况下,哪些点必选:选择B个点的情况下,哪些点一定不选. 选择A个点的情况,必选的点是那些其 ...

  10. 【动态规划+二分查找】POJ2533&POJ1631最长上升子序列（LIS）

    POJ2533裸的LIS,时间复杂度为O(n^2) #include<iostream> #include<cstdio> using namespace std; +; in ...