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>
這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue利用vue-baidu-map實(shí)現(xiàn)獲取經(jīng)緯度和搜索地址
在開(kāi)發(fā)項(xiàng)目的時(shí)候，發(fā)現(xiàn)需要獲取經(jīng)緯度，由于這個(gè)項(xiàng)目是用vue寫的，最后決定使用vue-baidu-map來(lái)快速獲取經(jīng)緯度，感興趣的可以了解一下2022-09-09
vue實(shí)現(xiàn)pdf文件發(fā)送到郵箱功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)pdf文件發(fā)送到郵箱功能,實(shí)現(xiàn)代碼包括對(duì)郵箱格式內(nèi)容是否為空的驗(yàn)證方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能(實(shí)例代碼)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-04-04
vuex?mutations的兩種調(diào)用方法小結(jié)
這篇文章主要介紹了vuex?mutations的兩種調(diào)用方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
基于Vue設(shè)計(jì)實(shí)現(xiàn)一個(gè)彈幕組件
這篇文章主要給大家分享一個(gè)開(kāi)發(fā)中常見(jiàn)的需求，接下來(lái)將為大家詳細(xì)介紹彈幕的實(shí)現(xiàn)以及設(shè)計(jì)思路一步一步描述出來(lái)，希望大家能夠喜歡2023-06-06
這篇文章主要介紹了vue父組件異步傳遞props值,子組件接收不到解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果
本文主要介紹了Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue使用$attrs和$listeners多級(jí)組件嵌套傳遞數(shù)據(jù)
這篇文章主要為大家介紹了vue使用$attrs和$listeners多級(jí)組件嵌套傳遞數(shù)據(jù)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vite(vue3)配置內(nèi)網(wǎng)ip訪問(wèn)的方法步驟
Vite是一個(gè)快速的構(gòu)建工具,Vue3是一個(gè)流行的JavaScript框架,下面這篇文章主要給大家介紹了關(guān)于vite(vue3)配置內(nèi)網(wǎng)ip訪問(wèn)的方法步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
解決Vue+Element ui開(kāi)發(fā)中碰到的IE問(wèn)題
今天小編就為大家分享一篇解決Vue+Element ui開(kāi)發(fā)中碰到的IE問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09