vue.js使用v-model指令實現(xiàn)的數(shù)據(jù)雙向綁定功能示例
更新時間：2018年05月22日 09:19:35 作者：愛代碼也愛生活
這篇文章主要介紹了vue.js使用v-model指令實現(xiàn)的數(shù)據(jù)雙向綁定功能,簡單分析了v-model指令的功能并結(jié)合實例形式給出了v-model指令實現(xiàn)數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了vue.js使用v-model指令實現(xiàn)的數(shù)據(jù)雙向綁定功能。分享給大家供大家參考，具體如下：
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定，本文就表單處理時運用v-model指令實現(xiàn)雙向綁定做一個介紹：
v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無論誰被改變，另一方也會相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(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代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試運行效果如下：
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
Vue3?實現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))
倒計時的運用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實現(xiàn)，感興趣的朋友一起看看吧2022-08-08
使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue3中注冊全局的組件,并在TS中添加全局組件提示方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
解決Vuepress碼云部署及自動跳轉(zhuǎn)404的問題
這篇文章主要介紹了解決Vuepress碼云部署及自動跳轉(zhuǎn)404的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果
這篇文章主要為大家詳細介紹了vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue前端優(yōu)雅展示后端十萬條數(shù)據(jù)面試點剖析
這篇文章主要為大家介紹了vue前端優(yōu)雅展示后端十萬條數(shù)據(jù)的考點剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue表單驗證rules及validator驗證器的使用方法實例
在vue開發(fā)中,難免遇到各種表單校驗,下面這篇文章主要給大家介紹了關(guān)于vue表單驗證rules及validator驗證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
CodeMirror提供了強大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當用戶編輯代碼時,實時預(yù)覽會根據(jù)代碼的變化進行更新,從而為用戶提供了一個交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進行代碼編輯器與實時預(yù)覽,需要的朋友可以參考下2023-10-10
element?實現(xiàn)導(dǎo)航欄收起展開功能及思路
這篇文章主要介紹了element?實現(xiàn)導(dǎo)航欄收起展開功能，實現(xiàn)思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個屬性也是 element 上的一個參數(shù)，意思為是否開啟折疊動畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起，需要的朋友可以參考下2023-01-01
Vue使用antd組件a-form-model實現(xiàn)數(shù)據(jù)連續(xù)添加功能
這篇文章主要介紹了Vue使用antd組件a-form-model實現(xiàn)數(shù)據(jù)連續(xù)添加功能,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12