幻 灭 Blog有朋自远方来,不亦乐乎 ?

Vue实现简单的商品增减功能

幻灭·2019-07-22 10:02·1199 次阅读

Vue实现简单的商品增减功能

复制代码
<!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">
        <p>{{goods.goodsName}}</p>
        <button @click="handleReducer()">-</button>
        <input type="text" v-model="goods.goodsNum">
        <button @click="handleAdd()">+</button>
        <p>单价:{{goods.goodsPrice}}</p>
        <p>运费:{{goods.fee}}</p>
        <p>总价:{{count}}</p>
    </div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
          goods:{
              goodsName:"三只松鼠",
              goodsPrice:33.3,
              goodsNum:1,
              fee:10
          }
        },
        methods:{
            handleReducer(){
                if(this.goods.goodsNum>1){
                    this.goods.goodsNum--
                }else{
                    this.goods.goodsNum = 1
                }
            },
            handleAdd(){
                this.goods.goodsNum++;
            }
        },
        computed:{
           count(){
                let sum = (( this.goods.goodsPrice * 10) * this.goods.goodsNum)/10;
                if(sum>=99){
                    return sum;
                }else{
                    return sum+this.goods.fee;
                }
           }
        }
    })


/*
    99 包邮

    不满99 加10块钱运费

*/


   
</script>
复制代码

 

posted @   前端小菜鸟吖  阅读(1199)  评论(0编辑  收藏  举报
编辑推荐:
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
阅读排行:
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?
点击右上角即可分享
微信分享提示