溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了Vue.js單向綁定和雙向綁定。分享給大家供大家參考，具體如下：
1、單向綁定
單向數據綁定的實現思路：
① 所有數據只有一份
② 一旦數據變化，就去更新頁面(只有data-->DOM，沒有DOM-->data)
③ 若用戶在頁面上做了更新，就手動收集(雙向綁定是自動收集)，合并到原有的數據中。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
2、雙向綁定
數據的雙向綁定是vue實現的一大功能。
使用v-model指令，實現視圖和數據的雙向綁定。
所謂雙向綁定，指的是vue實例中的data與其渲染的DOM元素的內容保持一致，無論誰被改變，另一方會相應的更新為相同的數據。這是通過設置屬性訪問器實現的。
v-model主要用在表單的input輸入框，完成視圖和數據的雙向綁定。
v-model只能用在<input>、<select>、<textarea>這些表單元素上。
雙向綁定的缺點：不知道data什么時候變了，也不知道是誰變了，變化后也不會通知，當然可以watch來監聽data的變化，但這復雜，還不如單向綁定。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
