计算属性

什么是计算属性

我么你知道，在模板中可以使用插值语法显示data中的数据
但是在某些情况下，我们需要对数据进行某些转化才显示，或者间多个数据结和一起显示。
- 比如我们由firstName和lastName两个变量，需要显示完整的名字。
- 此种要求可以通过将进行拼接即可，但是如果多个地方都需要完整额名称，我们就需要处处写，很不方便。
所以计算属性的用处就显示出来了
- 写法是使用computed属性,其定义处理函数。

<div id="app">
    <h2>{{firstName}}{{lastName}}</h2>
    <h2>{{fulName}}</h2>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            firstName:"Liu",
            lastName:"dehua"
        },
        computed:{
           fulName: function () {
               return this.firstName+this.lastName;
           }
        }
            //  fulName:{
            //      set:function (value) {
            //
            //      },
            //      get:function () {
            //         return this.firstName+last.lastName;
            //
            //      }
            //  }
    })
</script>

实现对数组的过滤与排序

<div id="app">
    <li v-for:"n in evennumbers">{{n}}</li>
</div>

<script>
    new Vue({
        data:{
            arr:[1,2,4,5,7,9]
        },computed:{
         evennumbers(){
         return this.arr.filter(function(n){return n%2==0})
        }
    })
</script>