一般來說,參數被定義后就不能改變,但在Vue中,我們可以通過監聽屬性的改變來改變參數的內容。
// 定義一個數據對象 var data = { message: 'Hello Vue.js' } // 利用Vue創建實例 var vm = new Vue({ // 將實例綁定到元素上 el: '#app', // 數據對象 data: data, // 計算屬性 computed: { // 將字符串反轉并輸出 reversedMessage: function () { return this.message.split('').reverse().join('') } } })
在上面的代碼中,我們定義了一個數據對象,并將它傳遞給Vue實例。我們還定義了一個計算屬性,并返回反轉后的字符串。當我們在HTML中使用該計算屬性時,我們需要做的是使用“v-bind”指令并將屬性綁定到數據對象上。
鼠標懸浮查看反轉后的字符串: {{ reversedMessage }}
此時,我們在頁面中可以看到一個帶有反轉后字符串的段落,并且當我們將鼠標懸停在該段落上時,會顯示原始字符串。雖然我們不能在頁面中直接更改數據對象,但是我們可以通過修改計算屬性來改變輸出的內容。
// 修改數據對象中的message屬性 vm.message = 'Goodbye Vue.js' // 計算屬性依然返回反轉后的字符串 // 并輸出“sj.euV eybdooG”
通過修改數據對象中的message屬性,我們可以改變反轉后字符串的內容。因此,我們可以通過監聽屬性的改變來改變參數的內容。Vue使得我們可以輕松地實現這個功能。