下面通過代碼給大家介紹vue 屬性攔截實現(xiàn)雙向綁定，具體代碼如下所示：

let obj = {}let get = ''Object.defineProperty(obj, 'get', { set: function(val) { document.getElementById('input').value = val document.getElementById('text').innerHTML = val }})document.getElementById('input').addEventListener('keyup', function(e) { obj.get = e.target.value})obj.get = 'hello'

PS：下面看下vue中屬性綁定和雙向綁定的實例代碼

一、屬性綁定

  <div id="root">    <div v-bind:title=" 'dear jin,' + title">hello world</div>  </div>  <script>    new Vue({      el: "#root",      data: {        title: 'this is hello world'      },      methods: {      }    })  </script>

通過 v-bind:title = " " 實現(xiàn)title綁定，等號 后面" " 里面可用js的表達(dá)式。

v-bind:title 可縮寫成 :title。

二、雙向綁定

  <div id="root">    <input type="text" v-model="content" />    <div>{{content}}</div>  </div>  <script>    new Vue({      el: "#root",      data: {        content: "this is content"      },      methods: {      }    })  </script>

v-model 為vue模板數(shù)據(jù)雙向綁定指令。

總結(jié)

以上所述是小編給大家介紹的vue 屬性攔截實現(xiàn)雙向綁定的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！