vue-计算属性：computed

计算属性：computed

<div id="app">
        <h1>{{strfn}}h1>
        <h1 @click="getC">{{rvalue}}h1>
        <ul>
            <li v-for="(v,i) in list" :key="v.name">
                {{v.name}}
            li>
        ul>
    div>
    <script src="./node_modules/vue/dist/vue.min.js">script>
    <script>
        new Vue({
            el: "#app",
            // computed 计算属性是一个属性，不是一个方法
            computed: {
                strfn: function () {
                    return this.name1 + this.name2
                },
                nlist: function () {
                    return this.list.filter(v => v.flag)
                },
                rvalue: function () {
                    // 计算属性具有缓存数据的效果，利于减少性能消耗
                    // 只有data中的属性值发生了变化，计算属性才会有更新
                    return this.num + '---' + Math.random()
                }
 
            },
            data: {
                name1: "qqqq",
                name2: "yyyy",
                num: 0,
                list: [
                    {
                        name: "王五",
                        flag: true
                    },
                    {
                        name: "66",
                        flag: false
                    },
                    {
                        name: "88",
                        flag: true
                    },
                ]
            },
            methods: {
                getC() {
                    this.num++
 
                }
            }
        })
    script>