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大特性解讀
• 常用的分佈式事務解決方案

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。