表单与v-model
基本用法
vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用，输入的内容会实时映射到绑定的数据上
example1：修改input框内容，message会实时渲染
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exmaple</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<input type="text" v-model="message">
<p>输入的内容是{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
message: ''
}
});
example2：单选按钮
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<input type="radio" v-model="picked" value="HTML" id="html">
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="JS" id="js">
<label for="js">JS</label>
<br>
<input type="radio" v-model="picked" value="CSS" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是{{ picked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
picked:'js'
}
});
example3：多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<input type="checkbox" v-model="checked" value="HTML" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="JS" id="js">
<label for="js">JS</label>
<br>
<input type="checkbox" v-model="checked" value="CSS" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是{{ checked }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
checked:['JS','HTML']
}
});
example4：选择框
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<select v-model="selected" multiple>
<option>html</option>
<option>js</option>
<option>css</option>
</select>
<p>选择的项是{{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
selected: ['html','css']
}
});
此时v-model绑定的是一个数组
实际业务中，option通过v-for动态生成，value和text通过v-bind动态生成
example4可以修改一下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2</title>
<link rel="stylesheet" href="main.css"/>
</head>
<div id="app">
<select v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<p>选择的项是{{ selected }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
js
var app = new Vue({
el: "#app",
data : {
selected: 'html',
options:[
{
text:'html',
value:'html',
},
{
text:'js',
value:'js',
},
{
text:'css',
value:'css'
}
]
}
});
修饰符
.lazy
数据双向绑定不是实时生效的，失焦或者回车才改变
<input type="text" v-model.lazy="message">
.number
输入的字符串转数字
<input type="text" v-model.number="message">
.trim
自动过滤输入的首位空格
<input type="text" v-model.trim="message">
