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>