收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

vue.js利用defineProperty實現數據的雙向綁定

vue.js如何實現數據的雙向綁定呢?

與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=[];
  //觸發obj對象set和get方法的時候,趁機來輸出或修改bind數組的內容
  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;//觸發了obj的set方法,等于#demo的value值賦值給bind['s']。
    display.innerHTML=bind['s'];
  }
</script>
</body>
</html>

實現效果:

查看圖片

2.兼容性

貌似es5的語法在IE9以下的瀏覽器不能兼容。所以vue只能兼容ie9以上的瀏覽器了。

可以使用es5的兼容庫:es5-shim。

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持積木網!

Angular2下使用pdf插件的方法詳解
前言最近因為工作的原因,需要在Angualr2建的項目里做一個pdf顯示的功能,在網上找了個插件,不過由于是第一次使用額外插件,在用的時候遇到了一些

Vue.js教程之axios與網絡傳輸的學習實踐
前言在學習了之前的路由vue-router和狀態管理vuex之后,就應該是網絡交互了。就學習尤大推薦的axios了。剛好本人對網絡請求這塊除了會get、put、post和del

Vue開發中整合axios的文件整理
前言大家在vue日常開發中,不可避免要整合axios,這里簡單記錄一下整合中的文件,方便以后使用查找。下面來看看詳細的介紹。整合方法整合文件axios.

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
云南快乐十分5月6 上海时时乐走势图3d之家 上海快3最新开奖定牛 后一4码计划 辽宁快乐12走势图基本走势图i 极速时时是私人的 香港特马免费资料大全 青海福彩app官网下载 江苏时时规则 尾数公式 上海快三人工计划 天津快乐十分走势图牛 黑龙江时时数据 四川福彩快乐12 湖南快乐十分组三任三 黑龙江时时开奖号码0