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