GuLi商城-前端基础Vue-计算属性computed和侦听器watch

爱被打了一巴掌 2024-03-24 18:28 29阅读 0赞

![0f36dc2b9fab41ad80c00da3820b94d9.png][]

![708783f02b8c47e7b14ce9f351813905.png][]

![0a5c24ac33fa4be28cad0f7ae19764c3.png][]![0e9252c8ee7d4aaf802e290d57acebef.png][]![975600b287bf43509629676fab536f65.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            
            <ul>
                <li>西游记； 价格：{
       {xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
                <li>水浒传； 价格：{
       {shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
                <li>总价：{
       {totalPrice}}</li>
                {
       {msg}}
            </ul>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
        <script>
            //watch可以让我们监控一个值的变化。从而做出相应的反应。
            new Vue({
                el: "#app",
                data: {
                    xyjPrice: 99.98,
                    shzPrice: 98.00,
                    xyjNum: 1,
                    shzNum: 1,
                    msg: ""
                },
                computed: {
                    totalPrice(){
                        return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                    }
                },
                watch: {
                    xyjNum(newVal,oldVal){
                        if(newVal>=3){
                            this.msg = "库存超出限制";
                            this.xyjNum = 3
                        }else{
                            this.msg = "";
                        }
                    }
                },
            })
        </script>
    
    </body>
    
    </html>

![87815669e8574757b37d88255890d45a.png][]

[0f36dc2b9fab41ad80c00da3820b94d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/30c61d68827844c9a2b623c6a47abdca.png
[708783f02b8c47e7b14ce9f351813905.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/642139b1690041a59c8aeb9996f34173.png
[0a5c24ac33fa4be28cad0f7ae19764c3.png]: https://img-blog.csdnimg.cn/0a5c24ac33fa4be28cad0f7ae19764c3.png
[0e9252c8ee7d4aaf802e290d57acebef.png]: https://img-blog.csdnimg.cn/0e9252c8ee7d4aaf802e290d57acebef.png
[975600b287bf43509629676fab536f65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/ec48ca3130a74e34ba7537a703b86813.png
[87815669e8574757b37d88255890d45a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/39860d26ceea485693c44034050a30fe.png