本文實(shí)例講述了Vue.js單向綁定和雙向綁定。分享給大家供大家參考，具體如下：
1、單向綁定
單向數(shù)據(jù)綁定的實(shí)現(xiàn)思路：
① 所有數(shù)據(jù)只有一份
② 一旦數(shù)據(jù)變化，就去更新頁面(只有data-->DOM，沒有DOM-->data)
③ 若用戶在頁面上做了更新，就手動(dòng)收集(雙向綁定是自動(dòng)收集)，合并到原有的數(shù)據(jù)中。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
2、雙向綁定
數(shù)據(jù)的雙向綁定是vue實(shí)現(xiàn)的一大功能。
使用v-model指令，實(shí)現(xiàn)視圖和數(shù)據(jù)的雙向綁定。
所謂雙向綁定，指的是vue實(shí)例中的data與其渲染的DOM元素的內(nèi)容保持一致，無論誰被改變，另一方會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(shè)置屬性訪問器實(shí)現(xiàn)的。
v-model主要用在表單的input輸入框，完成視圖和數(shù)據(jù)的雙向綁定。
v-model只能用在<input>、<select>、<textarea>這些表單元素上。
雙向綁定的缺點(diǎn)：不知道data什么時(shí)候變了，也不知道是誰變了，變化后也不會(huì)通知，當(dāng)然可以watch來監(jiān)聽data的變化，但這復(fù)雜，還不如單向綁定。
<!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>
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
