本書(shū)目錄：點(diǎn)擊進(jìn)入
一、表單處理
1.1、【雙向綁定】實(shí)現(xiàn)方式一：v-model
＞??代碼?
＞? 效果?
1.2、【雙向綁定】實(shí)現(xiàn)方式二：:value屬性 + input事件
＞??代碼?
＞? 效果?(同上)
二、實(shí)戰(zhàn)
2.1 【v-model 示例】輸入框?
＞??代碼 +?效果 （見(jiàn)1.1）
2.2 【v-model 示例】單選框?
＞??代碼?
＞? 效果
2.3 【v-model 示例】復(fù)選框?
＞??代碼?
＞? 效果
2.4 【v-model 示例】下拉菜單
＞??代碼?
＞? 效果
一、表單處理
-
收集表單數(shù)據(jù)，發(fā)送給后端，把后端的數(shù)據(jù)進(jìn)行回顯
-
雙向綁定：實(shí)質(zhì)上是接口返回對(duì)象和表單組件的綁定
-
v-model 指令?實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的處理。原理相當(dāng)于 :value屬性 + input事件
-
v-model除了可以處理輸入框以外，也可以用在單選框、復(fù)選框、以及下拉菜單中。
1.1、【雙向綁定】實(shí)現(xiàn)方式一：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、【雙向綁定】實(shí)現(xiàn)方式二：: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>＞? 效果?(同上)
二、實(shí)戰(zhàn)
2.1 【v-model 示例】輸入框?
＞??代碼 +?效果 （見(jiàn)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 示例】復(fù)選框?
＞??代碼?
<div id="app">
<input type="checkbox" v-model="fruits" value="蘋(píng)果">蘋(píng)果<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>＞? 效果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-807045.html
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>＞? 效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-807045.html
到了這里，關(guān)于【Vue3】2-10 : 表單處理與雙向數(shù)據(jù)綁定原理的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
