商品信息！！

最新推荐文章于 2024-07-22 15:13:59 发布

新人码玩家

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量107

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_63911352/article/details/130267011

版权

商品信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app" style="margin: 20px auto;width: 600px;">
        <div class="prod">
            <h1>商品信息</h1>
            <p>
                <p>
                    <label for="title">商品标题:</label>
                    <input type="text" v-model="title">
                    <span :class="{warn:!titleValid}">商品标题输入不能为空！</span>
                </p>

                <p>
                    <label for="price">商品价格:</label>
                    <input type="text" v-model="price">
                    <span :class="{warn:!priceValid}">商品价格输入不能为空！</span>
                </p>

                <p>
                    <label for="amount">商品数量:</label>
                    <input type="text" v-model="amount">
                    <span :class="{warn:!amountValid}">商品数量输入不能为空！</span>
                </p>

                <p>
                    《{{title}}》商品购买了{{amount}}本,总计&yen;{{total}}元
                </p>

            </p>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            title:"权威指南JavaScript",
            price:"40",
            total:"0",
            amount:"10",
            titleValid:true,
            priceValid:true,
            amountValid:true
        },
        watch:{
            title:function(newVal,oldVal){
                if(newVal !=""){
                    this.titleValid=true;
                }else{
                    this.titleValid =false;
                }
                console.log("新值:",newVal);
                console.log("旧值:",oldVal);
            },

            // price:function(newVal,oldVal){
            //     if(newVal !=""){
            //         this.priceValid = true;
                    
            //     }else{
            //         this.priceValid=false;
            //     }

            //     //计算总金额
            //     this.total = parseInt(newVal)*parseInt(this.amount)
            //     console.log("新值:",newVal);
            //     console.log("旧值:",oldVal);

            // },

                //监听初始值
                price:{
                    handler:function(newVal,oldVal){
                        this.total = parseInt(newVal)*parseInt(this.amount)
                        console.log("新值:",newVal);
                        console.log("旧值:",oldVal);
                    },

                    immediate:true
                },



            amount:function(newVal,oldVal){
                if(newVal !=""){
                    this.amountValid = true;

                }else{
                    this.amountValid=false;
                }
                //计算总金额
                this.total=parseInt(newVal)*parseInt(this.price)
                console.log("新值:",newVal);
                console.log("旧值:",oldVal);
            }

        }
    });
</script>
</html>