vue conputed使用方法

1、普通用法

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

2、帶參數的計算

<el-table-column label="房間號" >
            <template slot-scope="scope">
              <span :title="errorShow('房間號',scope.row.error.list)" :class="errorWarn('房間號',scope.row.error.list)"> {{ scope.row['房間號'] |Empty}}</span>
            </template>
          </el-table-column>


computed: {
      errorShow() {
        return function(title,list) {
          for (let item of list) {
            if(item.key==title){
              return item.Tip
            }
          }
        }
      },
      errorWarn() {
        return function(title,list) {
          for (let items of list) {
            if(items.key==title&&items.Level=='Error'){
              return 'error'
            }
            else if(items.key==title&&items.Level=='Warn'){
              return 'warn'
            }
            else {

            }
          }
        }
      }
    },

3、get、settter

<template>
  <div id="example">
    <input v-model="helloworld"/>
    <p>{{ hello }}</p>
    <p>{{ world }}</p>
    <p>{{ helloworld }}</p>
    <button @click="changedata">事件觸發</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      hello: 'hello',
      world: 'world'
    }
  },
  computed: { // getter，setter計算屬性都有
    helloworld: {
      // getter
      get: function () {
        console.log('getter called')
        return this.hello + this.world
      },
      // setter
      set: function (newValue) {
        console.log('setter called , newValue: ' + newValue)
        this.hello = newValue
      }
    }
  },
  methods: {
    changedata () {
      // this.hello = 'hello~' //並不能觸發set
      this.helloworld = 'hello~world!'
    }
  }
}
</script>