vue实现简算商品价格

最新推荐文章于 2023-06-18 16:49:49 发布

Ctrl Alt Shift

最新推荐文章于 2023-06-18 16:49:49 发布

阅读量877

点赞数 1

分类专栏： Web 前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_42676530/article/details/104441442

版权

Web 前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

要求：设定商品的价格和数量，自动得出商品总价。
methods 中的方法不哟啊使用箭头函数，否则绑定的是window；
EcmaScript 6为对象成员方法提供了一种简写的方式；
handleCountClick (){this.count++; }的写法等价与 handleCountClick : function(){},它没有任何特性，只是纯粹的简写了
其实加的那个button的按钮标签里可以直接写 v-on:click=“count++” ，效果一样。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <div>
        <label for="">商品价格</label>
        <input type="number" v-model="price"/>
    </div>
    <div>
        <label for="">商品数量</label>
        <button v-on:click="count = count - 1  < 0 ? 0 :count-1">-</button><span>{{count}}</span>
        <button v-on:click="handleCountClick">+</button>
    </div>
    <div>
        总价格: <strong>{{ price * count }}</strong>
    </div>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            price:5,
            count:2
        },

        methods:{

            handleCountClick (){
                this.count++;
            }
        }
    });
</script>

</body>
</html>

显示效果如下：
在这里插入图片描述

Ctrl Alt Shift

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
vue实现简算商品价格

要求：设定商品的价格和数量，自动得出商品总价。methods 中的方法不哟啊使用箭头函数，否则绑定的是window；EcmaScript 6为对象成员方法提供了一种简写的方式；handleCountClick (){this.count++; }的写法等价与 handleCountClick : function(){},它没有任何特性，只是纯粹的简写了其实加的那个button的按钮标签里...
复制链接

扫一扫

专栏目录