谷粒商城day26 -Vue-计算属性和侦听器

我才是真的封不觉

于 2020-09-01 07:28:17 发布

阅读量137

点赞数

分类专栏：谷粒商城文章标签： Vue-计算属性和侦听器

本文链接：https://blog.csdn.net/JavaCoder_juejue/article/details/108333252

版权

谷粒商城专栏收录该内容

150 篇文章 27 订阅

订阅专栏

计算属性和侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body >
        <div id = "app">
            苹果:单价 {{price1}}  购买数量 <input type="number" v-model="num1"> </br>
            西瓜:单价 {{price2}}  购买数量 <input type="number" v-model="num2"> </br>
            总价:{{totalPrice}} </br>
           <h3>{{msg}}</h3>
        </div>
       
        <script src="../node_modules/vue/dist/vue.js"></script>

        <script>
            let ap = new Vue({
                el:"#app",//绑定元素
                data:{//封装数据
                    price1:6.5,
                    price2:3.5,
                    num1:1,
                    num2:1,
                    msg:""
                },
                methods:{//封装方法
                    func(){
                        this.num++;
                    }
                },
                computed: {
                    totalPrice(){
                        return this.price1*this.num1 + this.price2*this.num2
                    }
                },
                watch: {
                    num1(newVal,oldVal){
                        if(newVal > 3){
                            this.msg = "超出库存";
                            this.num1 = 3;
                        }else{
                            msg = "";
                        }
                    }
                },
            })
        </script>
</body>
</html>

我才是真的封不觉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
谷粒商城day26 -Vue-计算属性和侦听器

计算属性和侦听器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head><body >
复制链接

扫一扫