VueJS計算屬性: computed

本文轉載自查看原文 2017-06-29 08:43 1658 Vue.JS學習

computed屬性

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>計算后反轉字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 計算屬性的 getter
 reversedMessage: function () { // `this` 指向 vm 實例
      return this.message.split('').reverse().join('') } } }) </script>
</body>
</html>

效果：

實例中聲明了一個計算屬性 reversedMessage 。

提供的函數將用作屬性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依賴於 vm.message，在 vm.message 發生改變時，vm.reversedMessage 也會更新。

computed vs methods

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>計算后反轉字符串: {{ reversedMessage }}</p>
  <p>使用方法后反轉字符串: {{ reversedMessage2() }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

效果:

可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。

computed setter

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ site }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 調用 setter， vm.name 和 vm.url 也會被對應更新
vm.site = '菜鳥教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>

效果：

從實例運行結果看在運行 vm.site = '菜鳥教程 http://www.runoob.com'; 時，setter 會被調用， vm.name 和 vm.url 也會被對應更新。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue（5）計算屬性computed 計算屬性computed的優點 Vue計算屬性 computed computed計算屬性 vue的computed計算屬性計算屬性 computed vue 之computed 計算屬性 Vue computed 計算屬性六、計算屬性的使用(computed) vue中computed計算屬性