Vue计算属性

        <div id="app">
            <h1>{{fullname}}</h1>
            <h1>{{emptyname}}</h1>
            <h2>{{he}}</h2>
            
            <h1>{{word}}</h1>
            <h2>{{reverse_word}}</h2>
        </div>
        
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    fullname:123,
                    emptyname:321,
                    word:"hello"
                },
                computed:{
                    he:function(){
                        return this.fullname+this.emptyname
                    },
                    reverse_word:function(){
                        return this.word.split("").reverse().join("")
                    }
                }
            })
        </script>

 

Vue基础知识_计算属性

如果需要反复进行对属性进行渲染，这个时候使用computed计算属性来节省性能。

扩展：js中的filter

var ages = [32, 33, 16, 40];
​
function checkAdult(age) {
    return age >= 18;
}
​
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

 

computed具体使用方法：

 

一：侦听器：watch

<script>
var app=new Vue({
    el:"#app",
    data:{
        msg:"hello",
        arr:['小明','小兰','小绿']
    }
    watch:{
        msg:function(val){
            console.log(val)//这里的参数就是msg等对应的值
        },
        arr:function(val){
            console.log(val);
            this.arr.push('小粉');
        }
    }
})
</script>

 

注意：watch不宜多用，这样会损耗性能