溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue.js使用v-model指令實現的數據雙向綁定功能。分享給大家供大家參考，具體如下：
vue.js的一大功能便是實現數據的雙向綁定，本文就表單處理時運用v-model指令實現雙向綁定做一個介紹：
v-model這個指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據。這是通過設置屬性訪問器實現的。例如：
app.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>
vuejs v-model 數據雙向綁定
</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">醫生</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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
