Vue学习笔记（二）

【书接上文】Vue学习笔记（一）

Vue的计算属性computed

计算属性表示根据已有的属性计算得到一个新的属性。

在computed中书写的函数名在HTML页面中可以作为一个属性来使用。

计算属性是依赖于缓存的。当页面中调用同一个计算属性多次的时候，计算属性后面的值直接从第一次的结果中获取，所以性能较好，推荐使用。

计算属性实例：

<div id="app">
        姓:<input type="text" v-model="firstN">
        名:<input type="text" v-model="lastN">
        <h1>全名:{{ fullName }}</h1>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            firstN:"",
            lastN:""
        },
        computed: {
            fullName(){
                return this.firstN + this.lastN;
            }
        },
    })
</script>

过滤器

Vue中允许自定义过滤器，可被用于一些常见文本的格式化。基本格式为{{ 变量 | 过滤器}}。

过滤器分为全局过滤器和局部过滤器。

全局过滤器在任何的Vue实例中都可以使用，
格式为：Vue.filter(过滤器名称,func(data,arg1,...){...})

其中 arg 是使用过滤器传入的值； | 是过滤管道符； data 是过滤管道符前面传过来的参数。

过滤器实例：

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ msg | format }}</p>   
</div>
<script>
    //format是过滤器名称
    Vue.filter("format",function(data,arg=""){
        return data.replace("点啥","韩美味") + arg;
    })
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"晚上吃点啥"
        }
    }) 
</script>