1. 文本输入框
<input v-model="message" placeholder="Type something...">
<p>{{ message }}</p>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
在这个例子中，v-model 将输入框的值与 message 数据属性进行双向绑定，输入框中的内容会即时更新到 message 中，反之亦然。
2. 复选框
<input type="checkbox" v-model="isChecked">
<p>{{ isChecked }}</p>
var app = new Vue({
el: '#app',
data: {
isChecked: false
}
});
这个例子中，v-model 会将复选框的状态与 isChecked 数据属性进行双向绑定。
3. 单选框
<input type="radio" value="option1" v-model="selectedOption"> Option 1
<input type="radio" value="option2" v-model="selectedOption"> Option 2
<p>{{ selectedOption }}</p>
var app = new Vue({
el: '#app',
data: {
selectedOption: ''
}
});
在这个例子中，v-model 将单选框的值与 selectedOption 数据属性进行双向绑定。
4. 下拉框
<select v-model="selectedOption">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<p>{{ selectedOption }}</p>
var app = new Vue({
el: '#app',
data: {
selectedOption: ''
}
});
这个例子中，v-model 将下拉框的选中值与 selectedOption 数据属性进行双向绑定。
通过 v-model 的使用，Vue.js 简化了表单控件与数据之间的同步，使得在表单中输入的数据能够方便地反映到 Vue 实例中，从而实现了更加动态和交互性的表单。
转载请注明出处：http://www.zyzy.cn/article/detail/4803/Vue