本书目录：点击进入
[＞ 代码](#＞ 代码)
[＞ 效果](#＞ 效果)
[1.2、【双向绑定】实现方式二：:value属性 + input事件](#1.2、【双向绑定】实现方式二：:value属性 + input事件)
[＞ 代码](#＞ 代码)
[＞ 效果 (同上)](#＞ 效果 (同上))
[2.1 【v-model 示例】输入框](#2.1 【v-model 示例】输入框)
[＞ 代码 + 效果 （见1.1）](#＞ 代码 + 效果 （见1.1）)
[2.2 【v-model 示例】单选框](#2.2 【v-model 示例】单选框)
[＞ 代码](#＞ 代码)
[＞ 效果](#＞ 效果)
[2.3 【v-model 示例】复选框](#2.3 【v-model 示例】复选框)
[＞ 代码](#＞ 代码)
[＞ 效果](#＞ 效果)
[2.4 【v-model 示例】下拉菜单](#2.4 【v-model 示例】下拉菜单)
[＞ 代码](#＞ 代码)
[＞ 效果](#＞ 效果)
一、表单处理
-
收集表单数据，发送给后端
-
把后端的数据进行回显
-
v-model 指令 实现响应式数据的处理。原理相当于 :value属性 + input事件
-
v-model除了可以处理输入框以外，也可以用在单选框、复选框、以及下拉菜单中。
1.1、【双向绑定】实现方式一：v-model
＞ 代码
html
<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事件
＞ 代码
html
<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 示例】单选框
＞ 代码
html
<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 示例】复选框
＞ 代码
html
<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 示例】下拉菜单
＞ 代码
html
<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>＞ 效果
