计算属性```js {{allStr}} 查看计算属性里面的随机数 /* 你要写一个方法，里面需要传一些参数明确写出你

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

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

  
         /* 你要写一个方法，里面需要传一些参数
            明确写出你的参数的实际内容和传入的参数的类型
        */

        /**
        * 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)
                }
            }
        });
    
</body>

</html>