watch监听器

在watch中可以定义想要监听的数据,格式如下:

watch:{
    property1(newVal,oldVal){},
    property2(newVal,oldVal){},
    property3(newVal,oldVal){},
}

其中property为你想监听的属性,newVal和oldVal是规定好的格式不能改,用于保存新的数据和老的数据,然后在代码体里能进行对应操作。

computed计算

computed中能对 对应属性(被定义属性不能再data中定义)进行计算并且返回页面,格式如下:

<div id="app1">{{property1}}{{property2}}{{property3}}</div>
computed:{
    property1(){},
    property2(){},
    property3(){},
}

其中property为你想计算的属性,对应的属性会随着自定义的计算公式或者代码动态显示内容在页面上。

以下是实例演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    用法为+-使用v-on:click/@click绑定methods:{}中的add和del方法判断。<br>
    使用v-on:blur调用
    中的check()方法对于失去焦点判断输入的num个数是否正确。<br>
    总价totalprice使用computed计算<br>
    <br>
    单价:{{price}}
    <br>
    您要购买的数量(限购十个):
    <button type="button" v-on:click="add">+</button>
    <input type="text" v-model:value="num" size="1" v-on:blur="check()">
    <button type="button" v-on:click="del">-</button>
    <br>
    总金额:{{totalprice}}
    <br>
    注意:{{msg}}
</div>
------------------------------------------------------------------------------------
<div id="app1">
    用法为+-使用v-on:click/@click绑定三元运算符判断。<br>
    使用watch:{}对于失去焦点判断输入的num个数是否正确。<br>
    总价totalprice使用methods:{}中的ca()计算方法计算<br>
    <br>
    单价:{{price}}
    <br>
    您要购买的数量(限购十个):
    <button type="button" @click="num<10?num++:num=10">+</button>
    <input type="text" v-model:value="num" size="1" >
    <button type="button" @click="num>0?num--:num=0">-</button>
    <br>
    总金额:{{totalprice}}
    <br>
    <button type="button" v-on:click="ca">提交</button>
    <br>
    注意:{{msg}}
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            price:20,
            num:0,
            msg:"明天发货"
        },
        methods:{
            add(){
                if(this.num<10){
                    this.num++;
                }else{
                    alert("最大为10件");
                }
            },
            del(){
                if(this.num>0){
                    this.num--;
                }else{
                    alert("最小为0件");
                }
            },
            check(){
                if(this.num>10){
                    alert("最多购买十个多了没有");
                    this.num=10;
                }else if(this.num<0){
                    alert("都没了还想让我倒贴啊");
                    this.num=0;
                }
            }
        },
        computed:{
            totalprice(){
                return this.num*this.price
            }
        }
    })

    var vm1=new Vue({
        el:"#app1",
        data:{
            price:20,
            num:0,
            totalprice:0,
            msg:"明天发货"
        },
        methods:{
            ca(){
                this.totalprice=this.num*this.price
            }
        },
        watch:{
            num(newVal,oldVal){
                if(newVal>10){
                    alert("最多购买十个多了没有");
                    this.num=0;
                }else if(newVal<0){
                    alert("都没了还想让我倒贴啊");
                    this.num=0;
                }
            }
        }
    })
</script>
</body>
</html>
最后修改:2020 年 10 月 21 日 12 : 10 AM
如果觉得我的文章对你有用,请随意赞赏