uni-app入门-实战教程-二十二-监听属性-watch

可以监听具体某一个值的改变，改变后的值

 /* 监听方法  开始*/
        watch:{
            /* val监听改变的值*/
            name(val){
                console.log(val,"监听方法");
            },
            /* num(val){
                console.log(val,"监听方法");
            } */
            /* 也可以写成  上面是 es6 新大地写法，更方便整洁*/
            num:function(val){
                console.log(val,"监听方法");
            }
        },
        /* 监听方法  结束*/

<template>
    <view>
            <view class="">{{name}}</view>
            <view>{{num}}</view>
            
            <!-- 三元运算符，如果大于18显示成年人 -->
            <view>{{num > 18 ? '成年人' : '未成年'}}</view>
            
            <button @tap="change()">修改</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name:"哈哈哈",
                num: 0,
                
            }
        },
        /* 监听方法  开始*/
        watch:{
            name(val){
                console.log(val,"监听方法");
            },
            /* num(val){
                console.log(val,"监听方法");
            } */
            /* 也可以写成  上面是 es6 新大地写法，更方便整洁*/
            num:function(val){
                console.log(val,"监听方法");
            }
        },
        /* 监听方法  结束*/
        onLoad() {

        },
        methods: {
            click:function(){
                console.log(this.name);
            },
            change(e){
                this.name = "hell world!"
                this.num +=1;
                console.log(this.name);
            }
        
        }
    }
</script>

<style>
    button{
        background: #007AFF;
        color: #FFFFFF;
        font-size: 50upx;
    }
</style>