基础用法
你可以用 v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model
本质上不过是语法糖。
它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model
会忽略所有表单元素的 value
、checked
、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。
你应该通过 JavaScript 在组件的 data
选项中声明初始值。
v-model
在内部为不同的输入元素使用不同的属性并抛出不同的事件:
- text 和 textarea 元素使用
value
属性和input
事件; - checkbox 和 radio 使用
checked
属性和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现 v-model
不会在输入法组合文字过程中得到更新
。如果你也想处理这个过程,请使用 input
事件。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
own:
<body> <div id="My_text"> <input v-model="message" placeholder='编辑我呀'> <!-- {{ message }}将同步input框输入的值 --> <p>Message is: {{ message }}</p> </div> <script src="./js/vue.js"></script> <script> var text = new Vue({ el:'#My_text', data:{ //自动监听message输入的数据 message:'' }, methods:{ } }) </script> </body>
多行文本
<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> Multiline message is:
own:
<body> <div id="My_text"> <input v-model="message" placeholder='编辑我呀'> <!-- {{ message }}将同步input框输入的值 --> <p>Message is: {{ message }}</p> <span>这是一个多行文本:</span> <p style="white-space: pre-line;">{{ message2 }} </p> <br/> <textarea v-model='message2' placeholder="请输入你的内容"></textarea> </div> <script src="./js/vue.js"></script> <script> var text = new Vue({ el:'#My_text', data:{ //自动监听message输入的数据 message:'', message2:'', }, methods:{ } }) </script> </body>
ps:
在文本区域插值 (<textarea>{{text}}</textarea>
) 并不会生效,应用 v-model
来代替。
复选框
单个复选框,绑定到布尔值:
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>
own :
<body> <div id="My_text"> <input type="checkbox" id='checkbox' v-model='checked'> <label for="checkbox">{{ checked }}</label> </div> <script src="./js/vue.js"></script> <script> var text = new Vue({ el:'#My_text', data:{ checked:"", }, methods:{ } }) </script> </body>
多个复选框,绑定到同一个数组:
<div id='example-3'>
<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>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
<body> <div id="My_text"> <input type="checkbox" id="riven" value="riven" v-model='checkedNames'> <label for="riven">Riven</label> <input type="checkbox" id="mark" value="mark" v-model='checkedNames'> <label for="mark">Fark</label> <input type="checkbox" id="frank" value="frank" v-model='checkedNames'> <label for="frank">Frank</label> </br> <span>Checked names: {{ checkedNames }}</span> </div> <script src="./js/vue.js"></script> <script> var text = new Vue({ el:'#My_text', data:{
//注意要定义数组 checkedNames:[], }, methods:{ } }) </script> </body>
单选按钮
<div id="example-4">
<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
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
own:
<body> <div id="My_text"> <input type="radio" id="one" value="One" v-model='PickedNames'> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model='PickedNames'> <label for="two">Two</label> <br> <span>你选择的是: {{ PickedNames }}</span> </div> <script src="./js/vue.js"></script> <script> var text = new Vue({ el:'#My_text', data:{ PickedNames:'', }, methods:{ } }) </script> </body>