Vue入門四、單個(gè)監(jiān)聽watch、深度監(jiān)聽deep、多個(gè)監(jiān)聽computed

發(fā)布時(shí)間：2020-05-07 08:39:18 來源：網(wǎng)絡(luò) 閱讀：1889 作者：煢煢木偶欄目：web開發(fā)

watch單個(gè)監(jiān)聽
computed多個(gè)監(jiān)聽
當(dāng)watch監(jiān)聽復(fù)雜數(shù)據(jù)類型的時(shí)候需要做深度監(jiān)聽deep
watch深度監(jiān)聽deep表達(dá)式：

     // 深度監(jiān)聽
        watch:{
            msg:{
                handler(val, oldval){
                    if(val.text == 'love'){
                        alert('I Love You')
                    }
                },
                deep:true//開啟深度監(jiān)聽
            }
        }

watch深度監(jiān)聽

<!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監(jiān)聽器</div>
    <input type="text" v-model="msg.text">
</div>

<script type="text/javascript">
    new Vue({
        el:'#app',
        data(){
            return {
                msg:{text:''},
            }
        },
        // 深度監(jiān)聽
        watch:{
            msg:{
                handler(val, oldval){
                    if(val.text == 'love'){
                        alert('I Love You')
                    }
                },
                deep:true//開啟深度監(jiān)聽
            }
        }
    })
</script>
</body>
</html>

watch監(jiān)聽

<!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監(jiān)聽器</div>
    <input type="text" v-model="msg">
</div>

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

computed多監(jiān)聽

<!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監(jiān)聽</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監(jiān)聽多個(gè)
        computed:{
            result(){
                return (Number(this.n1)+Number(this.n2))*Number(this.n3)
            }
        }
    })
</script>
</body>
</html>

向AI問一下細(xì)節(jié)

Vue入門四、單個(gè)監(jiān)聽watch、深度監(jiān)聽deep、多個(gè)監(jiān)聽computed

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

Vue入門四、單個(gè)監(jiān)聽watch、深度監(jiān)聽deep、多個(gè)監(jiān)聽computed