v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释。

1、v-model 双向绑定文本

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
message: '绑定文本'
}
})
</script>
</html>

输出结果:

2、v-model 双向绑定多行文本,与上面的例子相似。

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
message: '绑定多行文本'
}
})
</script>
</html>

输出结果:

3、v-model 绑定复选框

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
checked: 'true'
}
})
</script>
</html>

输出结果:选中为true   不选中则为false

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="jack" value="刘二狗" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="张麻子" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="小狗子" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
checkedNames: []
}
})
</script>
</html>

输出结果:

4、v-model 绑定单选按钮

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
picked: ''
}
})
</script>
</html>

输出结果:

5、v-model 绑定下拉列表

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
selected: ''
}
})
</script>
</html>

输出结果:

多选列表

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected" multiple style="width: 50px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
selected: []
}
})
</script>
</html>

输出结果:

6、动态选项,用 v-for 渲染:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
</html>

输出结果:

vue v-model 表单控件绑定的更多相关文章

  1. Vue进阶之表单控件绑定

    1.单行input <html> <head> <meta charset="UTF-8"> <meta name="viewp ...

  2. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  3. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  4. 表单控件绑定v-model

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  5. vue2.0 之表单控件绑定

    表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...

  6. Vue.js-----轻量高效的MVVM框架(七、表单控件绑定)

    话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  7. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  8. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  9. vue表单控件绑定(表单数据的自动收集)

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

随机推荐

  1. jenkins maven testng selenium自动化持续集成

    准备环境 首先我们新建一个maven的工程,并且在pom.xml中配置好我们依赖的一些jar包 <dependencies> <dependency> <groupId& ...

  2. 浅谈Java中的初始化和清理

    引言 这篇文章我们主要介绍Java初始化和清理的相关内容,这些内容虽然比较基础,但是还是在这边做一个简单的总结,方便以后查阅. 初始化过程 Java尽力保证:所有变量在使用之前都会得到恰当的初始化(对 ...

  3. CAS机制

    ##################################################################### 我们知道多线程操作共享资源时,会出现三个问题:可见性.有序性 ...

  4. Bus,Exclusive access,memory attribute

    指令LDREX,STREX是在armv6中新加的指令,配合AMBA3--AXI中的lock[1:0]信号. 在Atomic Access一节中是这么规定的:ARLOCK[1:0]/AWLOCK[1:0 ...

  5. 后台维护常用SQL

    OU.库存组织与子库存 select hou.organization_id ou_org_id, --org_id hou.name ou_name, --ou名称 ood.organization ...

  6. 23最小生成树之Kruskal算法

    图的最优化问题:最小生成树.最短路径 典型的图应用问题 无向连通加权图的最小生成树 有向/无向加权图的最短路径 四个经典算法 Kruskal算法.Prim算法---------------最小生成树 ...

  7. codeforces 461C

    这题说的是 给了一张长方形的纸 1*n 然后可以按照不同的做法去折这个纸张 他有两种操作,操作1 给了一个pi 点 然后将左边的纸往右边折,第2种操作是给了一个L 和 R 然后计算出 L和R 之间的纸 ...

  8. [转]使用C#开发ActiveX控件全攻略

    前言: 这段时间因为工作的需要,研究了一下ActiveX控件.总结如下: 先说说ActiveX的基本概念. 根据微软权威的软件开发指南MSDN(Microsoft Developer Network) ...

  9. 怎么查看是否安装Scrapy

    1.在python shell 下输入 import scrapy

  10. Ignite集群管理——基于静态IP的节点发现

    Ignite作为分布式内存,集群管理必不可少,Ignite支持基于组播,静态IP,Zookeeper,JDBC等方式发现节点,本文主要介绍基于静态IP的节点发现. 两个最重要的TCP通信设置类: 1. ...