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

watch单个监听computed多个监听当watch监听复杂数据类型的时候需要做深度监听deepwatch深度监听deep表达式：// 深度监听watch:{msg:{handler(val, oldval){if(val.text == 'love'){...

weixin_34289454

2678人浏览 · 2019-05-21 09:48:10

weixin_34289454 · 2019-05-21 09:48:10 发布

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>

转载于:https://blog.51cto.com/12012821/2397682

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^