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

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

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)最后界面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值