vue computed监听多个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ myMsg }}</p>
    <button @click="clickHandler">修改</button>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: "alex",
                age: 18,
            }
        },
        //在methods属性 和 computed属性 里声明的所有的方法里面的this指的都是vue, 里面不要用箭头 ***********
        //箭头函数 只用在定时器和ajax里面
        methods: { //里面的每一个方法要挂载到 vm上
            clickHandler() {//单体函数中的this就是当前对象vm
                console.log(this);
                this.msg = "wusir"; // 当msg的数据属性 发生改变,下面的watch就会立马监听**
                this.age = 20;
            },

            clickHandler2: function () {//这个里面的this也是当前对象vm
                console.log(this)  //在声明的函数内部  this指的是当前对象vue
            },

            //箭头函数 只用在定时器和ajax里面
            clickHandler3: () => {//但是箭头函数中的this是当前对象的父类window method里面不要用箭头
                console.log(this)//在声明的函数内部  this指的是当前对象vm的父类 window
            },
        },
        computed: { //对应的是一个对象  里面放key-value 计算属性默认只有getter方法 监听的是msg和age
            myMsg: function () { //声明一个方法
                //写业务逻辑

                return `我的名字叫${this.msg},年龄是${this.age}`;
            }
        }
    })
</script>
</body>
</html>
posted on 2018-11-30 11:51 KD_131 阅读(2691) 评论(0) 收藏举报