5、Vue的watch监听方法

时间 2020-05-06

标签 vue watch 监听方法繁體版

原文原文链接

1：html头文件的内容在<head>中引入了一个js文件javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='lib/vue.js'></script>
</head>

2:这段代码是<div>标签有一个全选的checkbox和三个checkbox还有一个button和一个texthtml

<body>
    <div id="app">
        <input type="checkbox" v-model="allChecked">全选</input> 
        <p  v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.isChecked">    
            {{item.userName}}
        </p>
        <button @click="clickMe">增长</button>
        <input type="text" v-model="user.userName">
    </div>

:这段代码是放在<script>中的Vue代码vue

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            list:[
                {id:1,userName:"a",isChecked:false},
                {id:2,userName:"b",isChecked:false},
                {id:3,userName:"c",isChecked:false}
            ],
            allChecked:false,
            user:{id:1,userName:"abc"}               
        },
        methods:{
            clickMe(){
                this.list.push( {id:4,userName:"d",isChecked:false});
            }
        },
        watch:{
          //注意！监听的方法名必须和变量名保持一致
            allChecked(newvalue,oldvalue){
                console.log(newvalue);
                console.log(oldvalue);s
            },
          
            //深度监听
            list:{
                handler:function(newval,oldval){
                    console.log(newval);
                    console.log(oldval);
                },
                deep:true
            },
            user: {
                    handler: function (newVal, oldVal) {
                        console.log(newVal);
                        console.log(oldVal);
                    },
                    deep: true
                }
                //普通监听
                // "user.userName": {
                //     handler: function (newVal, oldVal) {
                //         console.log(newVal);
                //         console.log(oldVal);
                //     }
                // },
        }

    });    
</script>

　　4:HTML结尾java

</body>
</html>

1. vue watch 监听
2. Vue watch监听
3. vue watch(监听) method(方法) computed(计算)
4. Vue——监听器watch
5. vue的watch监听函数
6. Vue的watch监听事件
7. vue watch监听的实战用法
8. vue watch 路由监听属性监听
9. watch监听，监听顺序 vue
10. 十二、Vue-监听器watch
更多相关文章...
• Redis watch命令——监控事务 - Redis教程
• Hibernate的5种检索方式 - Hibernate教程
• JDK13 GA发布：5大特性解读
• 常用的分布式事务解决方案