《风尚坐火箭学习vue》-- 第六章：Vue计算属性实现数据翻转功能

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

---

第六章：用Vue计算属性实现翻转功能

上章回顾： 学会了吗风尚？好好看，一会多写几遍，一定得学会！

---

“学会了，谢谢师傅，原来Vue这么有趣啊，师傅再来一个吧”风尚一脸期待的说道。

来吧，今天再教你个Vue的计算属性：

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

<div id="example">

  {{ msg.split('').reverse().join('') }}

</div>

当你需要从现有数组得到新的数据这个时候你就需要计算了computed，这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

<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"

这样用Vue计算属性实现翻转功能实现！

一会儿教你用Vue计算属性实现数据筛选功能，别站着快去练习两遍！