vue項(xiàng)目中data數(shù)據(jù)之間互相訪問的實(shí)現(xiàn)
如下代碼:
<div id="vue_det"> <input type="number" v-model="text"> <div>{{textAdd}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { text: 1, textAdd:parseInt(this.text) + 1 } }) </script>
想實(shí)現(xiàn)如下圖所示效果:div標(biāo)簽里面的值為input中的值+1計(jì)算得出。
上面代碼中的textAdd = parseInt(this.text) + 1,這種寫法肯定訪問不到this.text的值。
如若想訪問data中的值,且textAdd是有text計(jì)算得出,想要實(shí)現(xiàn)雙向數(shù)據(jù)綁定,text值變化,textAdd的值動(dòng)態(tài)改變,可以用conputed來實(shí)現(xiàn)。代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue的data中數(shù)據(jù)互相訪問</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <!-- <script src="vue.min.js"></script> --> </head> <body> <div id="vue_det"> <input type="number" v-model="text"> <div>{{textAdd}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { text: 1, // textAdd:this.text+1 }, computed: { textAdd: function() { return (parseInt(this.text) + 1); } } }) </script> </body> </html>
到此這篇關(guān)于vue項(xiàng)目中data數(shù)據(jù)之間互相訪問的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue data互相訪問內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue組件設(shè)計(jì)之多列表拖拽交換排序功能實(shí)現(xiàn)
這篇文章主要介紹了Vue組件設(shè)計(jì)之多列表拖拽交換排序,常見的場景有單列表拖拽排序,多列表拖拽交換排序,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05Vue使用$attrs實(shí)現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue如何使用$attrs實(shí)現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-02-02淺談vue+webpack項(xiàng)目調(diào)試方法步驟
本篇文章主要介紹了淺談vue+webpack項(xiàng)目調(diào)試方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09vue使用vuex實(shí)現(xiàn)首頁導(dǎo)航切換不同路由的方法
這篇文章主要介紹了vue使用vuex實(shí)現(xiàn)首頁導(dǎo)航切換不同路由的方法 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05