vue 计算属性

div id="app">
    h1 @click="value++">{{allStr}}</h1>
    button @click="fn">查看计算属性里面的随机数</button>
/div>

<script src="./vue2.6.14.js"></script>
<script>
     /* 你要写一个方法，里面需要传一些参数
        明确写出你的参数的实际内容和传入的参数的类型
    */

    /**
    * 1、name 用户的姓名 type: String
    * 2、age 用户的年龄 type：Number
    * 3、arr 用户的数据 type：Array
    **/
    /* function aa(name,age,arr){ */
    /* 根据传入的参数写的相关的业务逻辑 */
    /* } */

    let vm = new Vue({
        el: "#app",
        data: {
            str1: "姓名：",
            str2: "张三",
            str3: "年纪：",
            str4: "年芳20",
            value:1
        },
        /* 计算属性 */
        /* 就是用来处理data中的数据，
        把数据处理好了，方便给你使用 */
        /* 缓存 利于性能优化 避免重复获取数据 */
        /* 当data中的数据发生变化的时候computed中的值才会发生改变 */
        computed: {
            allStr(){
                return this.str1 + this.str2 + this.str3 + this.str4;
            },
            r(){
                return Math.random() + this.value;
            }
        },
        methods: {
            fn() {
                console.log(this.r)
            }
        }
    });
</script>