14vue学习_经典练习1--循环显示和2--购物车！！！

最新推荐文章于 2021-11-26 13:53:47 发布

chencaw

最新推荐文章于 2021-11-26 13:53:47 发布

阅读量164

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/chencaw/article/details/113668210

版权

VUE 专栏收录该内容

26 篇文章

订阅专栏

本文展示了两个Vue.js经典练习：一是使用`v-for`指令实现列表循环显示，点击元素变色；二是实现购物车功能，包括商品列表、数量增减和总价计算。代码中详细定义了数据、方法和计算属性，实现了动态交互和数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、经典练习一、循环显示，判断索引，点击变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <div id ="app">
        <ul>
            <li v-for="(item,index) in movies" 
            :class="{active:currentIndex === index}" @click="liClick(index)">
            {{index}}.{{item}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                movies: ['英雄','当幸福来敲门','阿甘','加勒比海盗'],
                currentIndex: 0
            },
            methods:{
                liClick(index){
                    this.currentIndex = index
                } 
            }

        })
    </script>
</body>

2、经典练习二、购物车

（1）三个项目文件如下

（2）index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-shooping</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id ="app">
        <div  v-if="books.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>    
                        <th>购买数量</th>      
                        <th>操作</th>                     
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.data}}</td>
                        <td>{{item.price | showPrice}}</td>     
                        <td>
                            <button @click="decrement(index)" v-bind:disabled="item.count<=1">-</button>
                            {{item.count}}
                            <button @click="increment(index)">+</button>
                        </td> 
                        <td><button @click="removeHandle(index)">移除</button></td>                   
                    </tr>
                </tbody>

            </table>
            <h2>总价格{{totalPrice | showPrice}}</h2>
        </div>
        <h2 v-else>购物车为空</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script src="main.js"></script>
</body>

（3）style.css的代码

table {
    border:1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}
th,td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}
th {
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}

（4）main.js的代码

//let（变量） /const（常亮）
const chen1 = new Vue({
    el: '#app',  //用于挂载要管理的元素
    data:{//定义数据
        books: [
            {
                id: 1,
                name: '《算法导论》',
                data: '2006-9',
                price: 85.00,
                count: 1
            },
            {
                id: 2,
                name: '《LINUX菜鸟编程》',
                data: '2006-2',
                price: 59.00,
                count: 1
            },
            {
                id: 3,
                name: '《编程珠玑》',
                data: '2008-10',
                price: 39.00,
                count: 1
            },
            {
                id: 4,
                name: '《代码大全》',
                data: '2006-3',
                price: 128.00,
                count: 1
            },
        ]
    },
    methods:{
        // getFinalPrice(price){
        //     return '¥'+price.toFixed(2)
        // }
        increment(index){
            this.books[index].count++
        },
        decrement(index){
            this.books[index].count--
        },
        removeHandle(index){
            this.books.splice(index,1)
        }
    },
    computed: {
        totalPrice(){
            let totalPrice = 0;
            for(let i =0; i<this.books.length; i++){
                totalPrice += this.books[i].price * this.books[i].count;
            }
            return totalPrice
        }
    },
    filters:{
        showPrice(price){
            return '¥'+price.toFixed(2)

        }
    }
})

（5）最后界面