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>