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