Vue:计算属性

基本例子
<div id="example">
			<p>Original message: "{{ message }}"</p>
			<p>Computed reversed message: "{{ reversedMessage }}"</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#example',
				data: {
					message: 'Hello'
				},
				computed: {
					// 计算属性的 getter
					reversedMessage: function() {
						// `this` 指向 vm 实例
						return this.message.split('').reverse().join('')
					}
				}
			})
		</script>
计算属性setter

     计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
posted @ 2019-04-26 08:51  drl_blogs  阅读(108)  评论(0编辑  收藏  举报