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. YII2 源码阅读 综述

    如何阅读源码呢? 我的方法是,打开xdebug的auto_trace [XDebug] ;xdebug.profiler_append = 0 ;xdebug.profiler_enable = 1 ...

  2. 【转载】文件下载FileDownloader

    原文地址:https://github.com/lingochamp/FileDownloader 特点 简单易用 高并发 灵活 可选择性支持: 独立/非独立进程 自动断点续传 需要注意 当下载的文件 ...

  3. ZOJ 3781 Paint the Grid Reloaded

    枚举,$BFS$,连通块缩点. 可以枚举一开始染哪个位置,然后逐层往外染色,看最多需要多少操作次数,也就是算最短距离.连通块缩点之后可以保证是一个黑白相间的图,且每条边的费用均为$1$,$BFS$即可 ...

  4. PHP超全局变量数组

    以下8个变量都是数组变量,又称为“预定义变量” 1.$_GET : 把数据通过地址栏传递到服务器,这是方式必须是$_GET方式传递: 2.$_POST : 通过表单发送的数据必须是POST方式: 3. ...

  5. 洛谷——P2082 区间覆盖(加强版)

    P2082 区间覆盖(加强版) 题目描述 已知有N个区间,每个区间的范围是[si,ti],请求出区间覆盖后的总长. 输入输出格式 输入格式: N s1 t1 s2 t2 …… sn tn 输出格式: ...

  6. 如何使用Web字体？

    如何使用Web字体 嵌入Web字体的关键是@font-face规则,通过它可以指定浏览器下载web字体的地址,以及如何在样式表中引用该字体 @font-face { font-family: Voll ...

  7. poj 1298(水题）

    The Hardest Problem Ever Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24241   Accept ...

  8. [CODECHEF]SEGPROD

    题意:给定$a_{1\cdots n}$和$p$,多次询问$\prod\limits_{i=l}^ra_i$对$p$取模的值,强制在线,每次询问要求$O(1)$回答 一个微小的黑科技... 静态区间查 ...

  9. js流程控制与函数

    流程控制 1.条件语句 分支结构 单向分支 if (条件表达式){ code... } 双向分支 if (条件表达式){ code... }else{ code... } 多向分支 if (条件表达式 ...

  10. Python学习札记

    Python是很多公司都在使用的一种脚本语言,其语法与Perl.C++.JAVA等都大同小异.本文仅对一些比较常用的语法结构进行总结,比如字典.列表.正则匹配.读写文件等.供广大喜爱Python的同学 ...