vue基础之监听器

categories:

vue基础
tags:
监听器

监听器

监听器

watch 监听的是单个属性基本的数据类型
基本数据类型简单监视
复杂数据类型深度监视

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue基础之监听器</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
    <button @click="stus[0].name='rose'">改变</button>
    <h4>{{stus[0].name}}</h4>
</div>
<script src="./vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data(){
            return {
                msg:'',
                stus:[{
                    name:'jack'
                }]
            }
        },
        // watch 监听的是单个属性基本的数据类型
        // 基本数据类型 简单监视
        // 复杂数据类型 深度监视
        watch:{
            // 监听字符串
            msg:function(newV,oldV1){
                console.log(newV,oldV1);
                if (newV == 'tusir'){
                    console.log("tusir来了")
                }
            },
        //    监听复杂数据类型 object array 尝试监视
            stus:{
                deep:true,
                handler:function (newV,oldV) {
                    console.log(newV[0].name,oldV[0].name,)
                }
            }
        }
    })
</script>
</body>
</html>