下面通過代碼給大家介紹vue 屬性攔截實現雙向綁定，具體代碼如下所示：
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 = " " 實現title綁定，等號 后面" " 里面可用js的表達式。
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模板數據雙向綁定指令。
總結
以上所述是小編給大家介紹的vue 屬性攔截實現雙向綁定的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
