基础用法
你可以用 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>
