一、基础
1.文本
<div id="vm">
<input v-model="message" />
<h1>{{message}}</h1>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
message: null
}
})
</script>
2.多行文本
<div id="vm">
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" ></textarea>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
message: null
}
})
</script>
3.复选框
<div id="vm">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="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>
<script>
var vm = new Vue({
el: '#vm',
data: {
checkedNames: []
}
})
</script>
4.单选按钮
<div id="vm">
<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>
<script>
var vm = new Vue({
el: '#vm',
data: {
picked: ''
}
})
</script>
5.选择框
（1）简单
<div id="vm">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
selected: ''
}
})
</script>
（2）多选
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vm">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
selected: []
}
})
</script>
</body>
</html>
（3）v-for动态渲染
<div id="vm">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
二、值绑定
1.复选框
2.单选按钮
3.选择框的选项
三、修饰符
1 number
自动转数字类型
<input v-model.number="age" type="number">
2.trim
过滤输入空格
<input v-model.trim="msg">
3.lazy
当失去焦点时更新
<div id="vm">
<input type="text" v-model.lazy="content">
<p>{{content}}</p>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
content: ''
},
})
</script>
