VUE v-model表單數(shù)據(jù)雙向綁定完整示例
更新時(shí)間：2019年01月21日 08:44:27 作者：黎成訶月
這篇文章主要介紹了VUE v-model表單數(shù)據(jù)雙向綁定,結(jié)合完整實(shí)例形式分析了vue.js實(shí)現(xiàn)表單數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了VUE v-model表單數(shù)據(jù)雙向綁定。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-model雙向綁定</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<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>
<!--select：用 v-for 渲染的動(dòng)態(tài)選項(xiàng)：-->
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '6',
data: {
name: '',
gender: '',
interest: [],
identity: ''
},
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
</body>
</html>
這里使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue實(shí)現(xiàn)書(shū)籍購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)書(shū)籍購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
這篇文章主要介紹了vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue實(shí)現(xiàn)excel表格的導(dǎo)入導(dǎo)出的示例
本文主要介紹了vue實(shí)現(xiàn)excel表格的導(dǎo)入導(dǎo)出的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue實(shí)現(xiàn)四級(jí)導(dǎo)航及驗(yàn)證碼的方法實(shí)例
我們?cè)谧鲰?xiàng)目經(jīng)常會(huì)遇到多級(jí)導(dǎo)航這個(gè)需求,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)四級(jí)導(dǎo)航及驗(yàn)證碼的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家介紹了在Vue項(xiàng)目中是否使用store原理深究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
flask和vue前后端分離項(xiàng)目部署的示例代碼
本文主要介紹了flask和vue前后端分離項(xiàng)目部署的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
解決vue項(xiàng)目跳轉(zhuǎn)同樣的頁(yè)面不刷新的問(wèn)題思路詳解
做公司官網(wǎng)項(xiàng)目的時(shí)候遇到的場(chǎng)景,頂部導(dǎo)航欄分類(lèi)商品跳轉(zhuǎn)到分類(lèi)詳情,然后在分類(lèi)詳情再次點(diǎn)擊頂部導(dǎo)航欄里另外的分類(lèi)商品,跳到同樣的頁(yè)面數(shù)據(jù)不刷新,下面小編給大家分享解決方式,關(guān)于vue跳轉(zhuǎn)不刷新問(wèn)題感興趣的朋友一起看看吧2023-09-09
vue-admin-template模板添加tagsview的實(shí)現(xiàn)
本文主要介紹了vue-admin-template模板添加tagsview的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04