快捷導(dǎo)航

vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼

更新時(shí)間：2018年10月24日 10:43:47 作者：怎么可以吃兔兔

這篇文章主要介紹了vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼，代碼簡(jiǎn)答易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

下面通過(guò)代碼給大家介紹vue 屬性攔截實(shí)現(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中屬性綁定和雙向綁定的實(shí)例代碼

一、屬性綁定

  <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>

通過(guò) v-bind:title = " " 實(shí)現(xiàn)title綁定，等號(hào) 后面" " 里面可用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 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

一次vue項(xiàng)目?jī)?yōu)化的實(shí)際操作記錄
用vue開發(fā)項(xiàng)目上線以后,發(fā)現(xiàn)首頁(yè)加載速度非常慢,如果項(xiàng)目比較大,甚至可能出現(xiàn)10s以上的等待,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目?jī)?yōu)化的相關(guān)資料,需要的朋友可以參考下
2022-09-09
一文帶你了解vue3.0響應(yīng)式
Vue3.0相比較于之前的版本更快、更小、更易于維護(hù)、更貼近原生、對(duì)開發(fā)者更友好，本文就Vue3.0進(jìn)行詳細(xì)介紹，需要了解的小伙伴可以參考一下這篇文章
2021-09-09
Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程
這篇文章主要介紹了Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程,使用 Vite+Ts 開發(fā)的是 Vue3 組件庫(kù),所以我們需要安裝 typescript、vue3,同時(shí)項(xiàng)目將采用 Less 進(jìn)行組件庫(kù)樣式的管理，需要的朋友可以參考下
2023-03-03
Vue3集成Element-plus快速搭建頁(yè)面框架的過(guò)程
ElementPlus是一款基于Vue3的UI組件庫(kù),提供了豐富的組件和響應(yīng)式設(shè)計(jì),易于使用和主題定制,在Vue3項(xiàng)目中集成ElementPlus,需要通過(guò)npm安裝并引入組件,主題色可以通過(guò)修改樣式文件進(jìn)行全局設(shè)置,本文介紹Vue3集成Element-plus快速搭建頁(yè)面框架,感興趣的朋友一起看看吧
2025-03-03
vue項(xiàng)目中添加單元測(cè)試的方法
這篇文章主要介紹了vue項(xiàng)目中添加單元測(cè)試的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
vue.js實(shí)現(xiàn)用戶評(píng)論、登錄、注冊(cè)、及修改信息功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)用戶評(píng)論、登錄、注冊(cè)、及修改信息功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
vue修改對(duì)象的屬性值后頁(yè)面不重新渲染的實(shí)例
今天小編就為大家分享一篇vue修改對(duì)象的屬性值后頁(yè)面不重新渲染的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue-simple-uploader上傳成功之后的response獲取代碼
這篇文章主要介紹了vue-simple-uploader上傳成功之后的response獲取代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧~
2020-09-09
在Nginx上部署前端Vue項(xiàng)目的詳細(xì)步驟(超級(jí)簡(jiǎn)單!)
這篇文章主要介紹了在Nginx上部署前端Vue項(xiàng)目的詳細(xì)步驟,Nginx是一款高效的HTTP和反向代理Web服務(wù)器,作為開源軟件,Nginx以其高性能、可擴(kuò)展性和靈活性廣泛應(yīng)用于Web架構(gòu)中,文中將步驟介紹的非常詳細(xì),需要的朋友可以參考下
2024-10-10
Vue3 axios配置以及cookie的使用方法實(shí)例演示
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下
2023-02-02