vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
更新時(shí)間：2017年04月28日 16:55:30 作者：小章魚哥
本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫前臺(tái)AJAX代碼實(shí)現(xiàn)用戶登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
vue.js如何實(shí)現(xiàn)數(shù)據(jù)的雙向綁定呢？
與angular不同。
vue利用的是es5的defineproperty特性。
1.一個(gè)小例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="demo">
<p id="display"></p>
<script>
var obj={};
var bind=[];
//觸發(fā)obj對(duì)象set和get方法的時(shí)候，趁機(jī)來輸出或修改bind數(shù)組的內(nèi)容
Object.defineProperty(obj,'s',{
set:function(val){
bind['s']=val;
},
get:function(){
return bind['s'];
}
})
var demo=document.querySelector('#demo');
var display=document.querySelector('#display');
//#demo的value值與bind['s']綁定，#display的innerHTML也與bind['s']綁定。
demo.onkeyup=function(){
obj['s']=demo.value;//觸發(fā)了obj的set方法，等于#demo的value值賦值給bind['s']。
display.innerHTML=bind['s'];
}
</script>
</body>
</html>
實(shí)現(xiàn)效果：
2.兼容性
貌似es5的語法在IE9以下的瀏覽器不能兼容。所以vue只能兼容ie9以上的瀏覽器了。
可以使用es5的兼容庫：es5-shim。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家!
相關(guān)文章
解決antd的Form組件setFieldsValue的警告問題
這篇文章主要介紹了解決antd的Form組件setFieldsValue的警告問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue中$emit傳遞多個(gè)參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個(gè)參(arguments和$event)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue 解決form表單提交但不跳轉(zhuǎn)頁面的問題
今天小編就為大家分享一篇vue 解決form表單提交但不跳轉(zhuǎn)頁面的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue?eslint報(bào)錯(cuò)error?"Component?name?"*****"
這篇文章主要給大家介紹了關(guān)于vue?eslint報(bào)錯(cuò)error?“Component?name?“*****“?should?always?be?multi-word”的解決方法,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vuex是Vue.js的官方狀態(tài)管理模式，它為Vue.js應(yīng)用程序提供了一個(gè)集中式的狀態(tài)管理解決方案，Vuex可以幫助我們管理應(yīng)用程序中所有組件的狀態(tài)，使得狀態(tài)管理變得更加簡(jiǎn)單和可靠，需要詳細(xì)了解可以參考下文2023-05-05
vue中axios處理http發(fā)送請(qǐng)求的示例（Post和get）
本篇文章主要介紹了vue中axios處理http請(qǐng)求的示例（Post和get），這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue3+vite動(dòng)態(tài)引入圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
在Vue中通過Mustache語法（雙大括號(hào)）將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache插值語法與v-bind指令的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue關(guān)于頁面刷新的幾個(gè)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
django簡(jiǎn)單的前后端分離的數(shù)據(jù)傳輸實(shí)例 axios
這篇文章主要介紹了django簡(jiǎn)單的前后端分離的數(shù)據(jù)傳輸實(shí)例 axios，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-05-05