vue專案中data資料之間互相訪問
阿新 • • 發佈:2019-01-08
如下程式碼:
<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>
想實現如下圖所示效果:div標籤裡面的值為input中的值+1計算得出。
上面程式碼中的textAdd = parseInt(this.text) + 1,這種寫法肯定訪問不到this.text的值。
如若想訪問data中的值,且textAdd是有text計算得出,想要實現雙向資料繫結,text值變化,textAdd的值動態改變,可以用conputed來實現。程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue的data中資料互相訪問</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>