computed应用案例

最新推荐文章于 2022-07-07 09:36:14 发布

天气晚来秋~

最新推荐文章于 2022-07-07 09:36:14 发布

阅读量180

点赞数

分类专栏： vue computed 文章标签： vue.js

本文链接：https://blog.csdn.net/TianQiWanLaiQiu/article/details/123590794

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

computed

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <button @click="add">添加商品</button>
        </p>
        <table border="1">
            <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in shopingCarts">
                <td><input v-model="item.goodsName"/></td>
                <td><input v-model="item.price"/></td>
                <td><input v-model="item.quantity"/></td>
                <td>
                    <button @click="remove(index)">删除</button>
                </td>
            </tr>
        </table>
        <p>
        <h3>总价: {{totalPrice}} 元</h3></p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                shopingCarts: [
                    {goodsName: '', price: '', quantity: ''}
                ]
            },
            computed: {
                totalPrice: function () {
                    let total = 0;
                    this.shopingCarts.forEach(function (item, index) {
                        let subtotal = item.price * item.quantity;
                        total += subtotal;
                    });
                    return total;
                }
            },
            methods: {
                add: function () {
                    this.shopingCarts.push({goodsName: '', price: '', quantity: ''});
                },
                remove: function (index) {
                    this.shopingCarts.splice(index, 1);
                }
            }
    
        });
    </script>
</body>
</html>

天气晚来秋~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
computed应用案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.ne.
复制链接

扫一扫