【Vue3】2-10 : 表单处理与双向数据绑定原理
本书目录：点击进入
1.2、【双向绑定】实现方式二：:value属性 + input事件
一、表单处理
-
收集表单数据，发送给后端，把后端的数据进行回显
-
双向绑定：实质上是接口返回对象和表单组件的绑定
-
v-model 指令 实现响应式数据的处理。原理相当于 :value属性 + input事件
-
v-model除了可以处理输入框以外，也可以用在单选框、复选框、以及下拉菜单中。
1.1、【双向绑定】实现方式一：v-model
＞ 代码
<body>
<div id="app">
<input type="text" v-model="message">
</div>
<script>
let vm = Vue.createApp({
data(){
return {
message: 'hello world'
}
}
}).mount('#app');
setTimeout(()=>{
vm.message = 'hi vue'
}, 5000)
</script>
</body>＞ 效果
1.2、【双向绑定】实现方式二：:value属性 + input事件
＞ 代码
<body>
<div id="app">
<!--<input type="text" v-model="message">-->
<input type="text" :value="message" @input="message = $event.target.value">
</div>
<script>
let vm = Vue.createApp({
data(){
return {
message: 'hello world'
}
}
}).mount('#app');
setTimeout(()=>{
vm.message = 'hi vue'
}, 5000)
</script>
</body>
</html>＞ 效果 (同上)
二、实战
2.1 【v-model 示例】输入框
＞ 代码 + 效果 （见1.1）
2.2 【v-model 示例】单选框
＞ 代码
<div id="app">
<input type="radio" v-model="gender" value="女">女<br>
<input type="radio" v-model="gender" value="男">男<br>
{{ gender }}
</div>
<script>
let vm = Vue.createApp({
data(){
return {
gender: '男'
}
}
}).mount('#app');
</script>＞ 效果
2.3 【v-model 示例】复选框
＞ 代码
<div id="app">
<input type="checkbox" v-model="fruits" value="苹果">苹果<br>
<input type="checkbox" v-model="fruits" value="西瓜">西瓜<br>
<input type="checkbox" v-model="fruits" value="哈密瓜">哈密瓜<br>
{{ fruits }}
</div>
<script>
let vm = Vue.createApp({
data(){
return {
fruits: ['西瓜', '哈密瓜']
}
}
}).mount('#app');
</script>＞ 效果
2.4 【v-model 示例】下拉菜单
＞ 代码
<div id="app">
<select v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
{{ city }}
</div>
<script>
let vm = Vue.createApp({
data(){
return {
city: '杭州'
}
}
}).mount('#app');
</script>＞ 效果
