vue v-model 表单控件绑定
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 表单控件绑定的更多相关文章
- Vue进阶之表单控件绑定
1.单行input <html> <head> <meta charset="UTF-8"> <meta name="viewp ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- 表单控件绑定v-model
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- vue2.0 之表单控件绑定
表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
话不多说,先上完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
随机推荐
- [vue]实现父子组件数据双向绑定
参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...
- 调用sklearn包中的PLA算法[转载]
转自:https://blog.csdn.net/u010626937/article/details/72896144#commentBox 1.Python的机器学习包sklearn中也包含了感知 ...
- oracle修改内存使用和性能调节，SGA
最近装了oracle,电脑实在太卡了,想要限制内存使用,结果碰到一系列问题: 要用SYS帐户登录,修改SGA使用,结果不知道SYS密码.用SYSTEM帐户权限不够. 试了几条语句后,有几个文件修改不了 ...
- [LeetCode] 199. Binary Tree Right Side View_ Medium tag: BFS, Amazon
Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...
- java判断包含contains方法的使用
java中contains方法是判断是否存在包含关系,比如说a =[1,2,3,4], b=1那么a就包含b contains返回的是布尔类型true 和false,包含的话就返回true,不包含的话 ...
- HTML鼠标悬停改变样式
a.tt:hover {color: #FF0000;} <a class="tt" href="test.html">test</a> ...
- 转载 vsftpd安装
http://blog.csdn.net/shutfuckingup/article/details/8250290 1:安装vsftpd yum install vsftpd 2:关闭防火墙 ...
- VS2010/MFC编程入门之四十三（MFC常用类：CTime类和CTimeSpan类）
上一节中鸡啄米讲了MFC常用类CString类的用法,本节继续讲另外两个MFC常用类-日期和时间类CTime类和CTimeSpan类. 日期和时间类简介 CTime类的对象表示的时间是基于格林威治标准 ...
- 3/5/2014 cfb 小心
During each move the player can choose all lines of the matrix where dwarf is not on the cell with c ...
- pandas练习（三）------ 数据分组
探索酒类消费数据 相关数据见(github) 步骤1 - 导入pandas库 import pandas as pd 步骤2 - 数据集 path3 = "./data/drinks.csv ...