Vue入门四、单个监听watch、深度监听deep、多个监听computed

发布时间：2020-05-07 08:39:18 作者：茕茕木偶
来源：网络阅读：1897

watch单个监听
computed多个监听
当watch监听复杂数据类型的时候需要做深度监听deep
watch深度监听deep表达式：

     // 深度监听
        watch:{
            msg:{
                handler(val, oldval){
                    if(val.text == 'love'){
                        alert('I Love You')
                    }
                },
                deep:true//开启深度监听
            }
        }

watch深度监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app">
    <div>watch监听器</div>
    <input type="text" v-model="msg.text">
</div>

<script type="text/javascript">
    new Vue({
        el:'#app',
        data(){
            return {
                msg:{text:''},
            }
        },
        // 深度监听
        watch:{
            msg:{
                handler(val, oldval){
                    if(val.text == 'love'){
                        alert('I Love You')
                    }
                },
                deep:true//开启深度监听
            }
        }
    })
</script>
</body>
</html>

watch监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app">
    <div>watch监听器</div>
    <input type="text" v-model="msg">
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                msg: ''
            }
        },
        // 深度监听
        watch: {
            msg: {
                handler(val, oldval) {
                    if (val == 'love') {
                        alert('I Love You')
                    }
                }
            }
        }
    })
</script>
</body>
</html>

computed多监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app">
    <div>computed监听</div>
    <br>
    (<input type="text" v-model="n1">+
    <input type="text" v-model="n2">)*
    <input type="text" v-model="n3">={{result}}
</div>

<script type="text/javascript">
    new Vue({
        el:'#app',
        data(){
            return {
                n1:'',
                n2:'',
                n3:''
            }
        },
        // computed监听多个
        computed:{
            result(){
                return (Number(this.n1)+Number(this.n2))*Number(this.n3)
            }
        }
    })
</script>
</body>
</html>

Vue入门四、单个监听watch、深度监听deep、多个监听computed

相关阅读