2019-05-04 |

计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

<div id="example">
{{msg.split("").reverse().join("") }}
</div>

,这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

当你需要从现有数组得到新的数据这个时候你就需要计算了computed
<div id="example">
    <p>原来的信息: "{{ msg }}"</p>
    <p>计算翻转的信息: "{{ rmsg }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    msg: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    rmsg: function () {
    // `this` 指向 vm 实例
    return this.msg.split('').reverse().join('')
    }
  }
})
结果:

原来的信息: "hello"

计算翻转的信息: "olleh"

0

发表评论

    评价:
    验证码: 点击我更换图片
    最新评论