Vue表單demo v-model雙向綁定問(wèn)題
更新時(shí)間：2018年06月29日 11:32:10 作者：黎成訶月
本文通過(guò)實(shí)例代碼給大家介紹了Vue表單demo v-model雙向綁定問(wèn)題,代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
具體代碼如下所示：
<div id="app">
<textarea v-model = "message" placeholer = '請(qǐng)?jiān)诖溯斎胛淖?></textarea>
<span>{{message}}</span>
</br>
<input type="text" v-model="data.name"/>
<span>姓名：{{data.name}}</span>
</br>
<input type="radio" id="boy" value="男" v-model="data.gender"/>
<label for="boy">男</label>
<input type="radio" id="girl" value="女" v-model="data.gender"/>
<lable for="girl">女</lable>
<span>{{data.gender}}</span>
<br/>
<input type="checkbox" id="item1" value="閱讀" v-model="data.interest"/>
<lable for="item1">閱讀</lable>
<input type="checkbox" id="item2" value="打球" v-model="data.interest"/>
<lable for="item2">打球</lable>
<input type="checkbox" id="item3" value="體操" v-model="data.interest"/>
<lable for="checkbox">體操</lable>
<br/>
<span>{{data.interest}}</span>
<select v-model="data.identity">
<option value="java" selected>java</option>
<option value="web">web</option>
<option value="hr">hr</option>
</select>
<span>身份：{{data.identity}}</span>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '6',
data: {
name: '',
gender: '',
interest: [],
identity: ''
},
}
})
</script>
總結(jié)
以上所述是小編給大家介紹的Vue表單demo v-model雙向綁定問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue概念及常見(jiàn)命令，介紹了vue.js聲明式渲染、雙向綁定及常用指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
在Vue+Ts+Vite項(xiàng)目中配置別名指向不同的目錄并引用的案例詳解
這篇文章主要介紹了在Vue+Ts+Vite項(xiàng)目中配置別名指向不同的目錄并引用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Vue開(kāi)發(fā)實(shí)例探究key的作用詳解
這篇文章主要為大家介紹了Vue開(kāi)發(fā)實(shí)例探究key的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
vue style width a href動(dòng)態(tài)拼接問(wèn)題的解決
這篇文章主要介紹了vue style width a href動(dòng)態(tài)拼接問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue v-model相關(guān)知識(shí)總結(jié)
這篇文章主要介紹了Vue ​v-model相關(guān)知識(shí)總結(jié)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue實(shí)現(xiàn)模糊查詢的簡(jiǎn)單方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)模糊查詢的簡(jiǎn)單方法,在vue中,前端模糊搜索主要是用computed屬性實(shí)現(xiàn),本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
在本篇文章里小編給大家整理的是一篇關(guān)于vue3組件通信的方式總結(jié)及實(shí)例用法，對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹(shù)形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案
在 Vue 的響應(yīng)式系統(tǒng)中,reactive 對(duì)象是一個(gè)深度代理,它會(huì)追蹤對(duì)象屬性的變更,但如果你將整個(gè)對(duì)象重新賦值,那么 Vue 無(wú)法繼續(xù)追蹤新的對(duì)象,本文給大家介紹了使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue-cropper實(shí)現(xiàn)裁剪圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05