vue.js利用defineProperty實現(xiàn)數(shù)據(jù)的雙向綁定
更新時間：2017年04月28日 16:55:30 作者：小章魚哥
本篇文章主要介紹了用Node.js當作后臺、jQuery寫前臺AJAX代碼實現(xià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ù)組的內容
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。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家!
相關文章
這篇文章主要介紹了vuex入門教程，圖文+實例解析，具有很好的參考價值，希望對大家有所幫助。2022-03-03
今天小編就為大家分享一篇Vue 第三方字體圖標引入 Font Awesome的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了Vue.js 2.0 如何使用axios，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了vue修改swiper框架輪播圖小圓點的樣式不起作用的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單計算商品價格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
在項目開發(fā)過程中,我們經常會用到svg矢量圖,本文主要介紹了vue3中引入svg矢量圖的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了vue 虛擬dom的patch源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法(最新推薦)
有時候我們需要對一個組件綁定自定義 v-model,以更方便地實現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue demo實現(xiàn)商品列表的展示，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05