v-model的使用
v-model的使用
你可以用v-model
指令在表单<input>
、<textarea>
及<select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理v-model
会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
代码:
<template>
<div>
<p>=====普通输入框=====</p>
<input v-model="message1" placeholder="edit me">
<p>Message is: {{ message1 }}</p>
<p>=====多行输入框=====</p>
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
<p>Message is:</p>
<p style="white-space: pre-line;">{{ message2 }}</p>
<p>=====复选框=====</p>
<input type="checkbox" v-model="checked" >
<p>checkbox is:{{checked}}</p>
<p>=====多个复选框=====</p>
<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>
<p>=====单选按钮=====</p>
<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>
<p>=====选择框=====</p>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<p>=====选择框(多选时)=====</p>
<select v-model="multipleSelected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ multipleSelected }}</span>
</div>
</template>
<script>
export default {
data(){
return {
message1:'',
message2:'',
checked:false,
checkedNames:[],
picked:'',
selected:'',
multipleSelected:[]
}
}
}
</script>
<style>
</style>
这部分代码整理自官网手册。
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。