vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能示例
本文實(shí)例講述了vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能。分享給大家供大家參考，具體如下：
vue.js的一大功能便是實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，本文就表單處理時(shí)運(yùn)用v-model指令實(shí)現(xiàn)雙向綁定做一個(gè)介紹：
v-model這個(gè)指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向綁定，指的就是我們?cè)趈s中的vue實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無(wú)論誰(shuí)被改變，另一方也會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過(guò)設(shè)置屬性訪問(wèn)器實(shí)現(xiàn)的。例如：
app.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>
vuejs v-model 數(shù)據(jù)雙向綁定
</title>
<style type="text/css">
[v-cloak] { display: none }
</style>
</head>
<body>
<div id="app">
<form>
姓名：
<input type="text" v-model="data.name" placeholder="姓名"/>
<br />
性別：
<input type="radio" id="one" value="One" v-model="data.sex"/>
<label for="man">男</label>
<input type="radio" id="two" value="Two" v-model="data.sex"/>
<label for="male">女</label>
<br />
<input type="checkbox" id="jack" value="book" v-model="data.interest"/>
<label for="jack">閱讀</label>
<input type="checkbox" id="john" value="swim" v-model="data.interest"/>
<label for="john">游泳</label>
<input type="checkbox" id="move" value="game" v-model="data.interest"/>
<label for="move">游戲</label>
<input type="checkbox" id="mike" value="song" v-model="data.interest"/>
<label for="mike">唱歌</label>
<br />
身份：
<select v-model="data.identity">
<option value="teacher" selected>教師</option>
<option value="doctor">醫(yī)生</option>
<option value="lawyer">律師</option>
</select>
</form>
<p><pre>data: {{$data | json 2}}</pre></p>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
new Vue({
el: '#app',
data: {
data:{
name:'',
sex:'',
interest:[],
identity:''
}
}
})
})
</script>
</html>
使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行效果如下：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場(chǎng)景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類的，即使用戶跳轉(zhuǎn)到其它頁(yè)面或者刷新，再次回到登錄也，驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過(guò)本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-08-08
使用Vue指令實(shí)現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁(yè)面上,同時(shí)還希望能夠?qū)Υa塊進(jìn)行高亮顯示,今天我將分享一段代碼,通過(guò)Vue指令實(shí)現(xiàn)了這個(gè)功能,需要的朋友可以參考下2023-09-09
Vue3中注冊(cè)全局的組件,并在TS中添加全局組件提示方式
這篇文章主要介紹了Vue3中注冊(cè)全局的組件,并在TS中添加全局組件提示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
解決Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404的問(wèn)題
這篇文章主要介紹了解決Vuepress碼云部署及自動(dòng)跳轉(zhuǎn)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實(shí)現(xiàn)頁(yè)面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vue前端優(yōu)雅展示后端十萬(wàn)條數(shù)據(jù)面試點(diǎn)剖析
這篇文章主要為大家介紹了vue前端優(yōu)雅展示后端十萬(wàn)條數(shù)據(jù)的考點(diǎn)剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue中代碼編輯器與實(shí)時(shí)預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡(jiǎn)單,當(dāng)用戶編輯代碼時(shí),實(shí)時(shí)預(yù)覽會(huì)根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個(gè)交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時(shí)預(yù)覽,需要的朋友可以參考下2023-10-10
element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能及思路
這篇文章主要介紹了element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能，實(shí)現(xiàn)思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個(gè)屬性也是 element 上的一個(gè)參數(shù)，意思為是否開啟折疊動(dòng)畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起，需要的朋友可以參考下2023-01-01
Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實(shí)現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12