vue入门Demo1

最新推荐文章于 2024-04-18 14:41:10 发布

JY逆火

最新推荐文章于 2024-04-18 14:41:10 发布

阅读量242

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/wjy0629/article/details/89084474

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Html:

<!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>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="app">
        <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in list">
                        <td>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>
                            <button @click="minus(index)">-</button>
                            {{item.count}}
                            <button @click='add(index)'>+</button>
                        </td>
                        <td>
                            <button @click="deleteItem(index)">删除</button>
                        </td>
                    </tr>
                </tbody>
                <div>总价格：￥ {{totalPrice}}</div>
        </table>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="demo.js"></script>
</body>
</html>

js:

var app = new Vue({
    el:'#app',
    data:{
        list:[
            {
                id:100,
                name:'apple6',
                price:3000,
                count:1
            },
            {
                id:101,
                name:'apple7',
                price:2000,
                count:1
            },
            {
                id:102,
                name:'apple8',
                price:1000,
                count:1
            }
        ]
    },
    computed: {
        totalPrice (){
            var price = 0;
            for (let index = 0; index < this.list.length; index++) {
                var item = this.list[index];
                price += item.price * item.count;
                
            }
            return price;
        }
    },
    methods: {
        add(index){
            this.list[index].count ++;
        },
        minus(index){
            if(this.list[index].count === 1) return;
            this.list[index].count --;
        },
        deleteItem(index){
            this.list.splice(index,1);
        }
    },
})

JY逆火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门Demo1

Html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫