表单输入绑定
用 v-model
指令在表单 <input>
及 <textarea>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
文本
<div id="app">
<input v-model="message" type="text" placeholder="edit me">
<p>Message is: {{message}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ' '
}
})
</script>
多行文本
<div id="app">
<textarea v-model="message" type="text" placeholder="add multiple lines"></textarea>
<p>Multiline is: </p>
<p style="white-space: pre-line;">{{message}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
复选框
单个复选框 绑定到布尔值
<div id="app">
<input type="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
多个复选框 绑定到同一个数组
<div id="app">
<input type="checkbox" value="JavaScript" v-model="checkedNames">
<label for="JavaScript">JavaScript</label>
<input type="checkbox" value="jQuery" v-model="checkedNames">
<label for="JQuery">JQuery</label>
<input type="checkbox" value="VueJs" v-model="checkedNames">
<label for="VueJs">VueJs</label>
<br>
<br>
<span>checkedNames:{{checkedNames}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
单选按钮
<div id="app">
<input type="radio" value="JavaScript" v-model="picked">
<label for="JavaScript">JavaScript</label>
<input type="radio" value="jQuery" v-model="picked">
<label for="JQuery">JQuery</label>
<input type="radio" value="VueJs" v-model="picked">
<label for="VueJs">VueJs</label>
<br>
<br>
<span>Picked: {{picked}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: ' '
}
})
</script>
< br />
选择框
选择框单选
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>JavaScript</option>
<option>JQuery</option>
<option>VueJS</option>
</select>
<p>Selected: {{selected}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
选择多选时 绑定到数组
扫描二维码关注公众号,回复: 1509730 查看本文章
<div id="app">
<select multiple v-model="selected">
<option>JavaScript</option>
<option>JQuery</option>
<option>VueJS</option>
</select>
<p>Selected: {{selected}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
用
v-for
渲染的动态选项
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<p>Selected: {{selected}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{ text: 'JavaScript', value: 'A'},
{ text: 'JQuery', value: 'B'},
{ text: 'VueJS', value: 'C'}
]
}
})
</script>