Vue练习—商品筛选

最新推荐文章于 2022-05-03 17:37:03 发布

飞羽逐星

最新推荐文章于 2022-05-03 17:37:03 发布

阅读量492

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/xun__xing/article/details/108432776

版权

vue学习专栏收录该内容

59 篇文章 7 订阅

订阅专栏

商品筛选

一、商品筛选

一、商品筛选

* {
  margin: 0;
  padding: 0;
}

ul, li {
  list-style: none;
}

body {
  background-color: #f40;
}

#app {
  box-sizing: border-box;
  width: 500px;
  margin: 2px auto 0;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}

#app .store {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#app .store .select-all {
  margin-right: 10px;
}

#app .store .store-name {
  font-weight: bold;
  font-size: 14px;
}

#app .course-list .course {
  display: flex;
  margin-bottom: 20px;
}

#app .course-list .course-radio {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  transform: translateY(32px);
}

#app .course-list .poster {
  width: 80px;
  height: 80px;
}

#app .course-list .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 410px;
  margin-left: 10px;
  font-size: 12px;
}

#app .course-list .title {
  margin-top: 10px;
  color: #3c3c3c;
}

#app .course-list .price-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

#app .course-list .price {
  color: #f40;
  font-weight: 700;
}

#app .course-list .control-cart {
  font-size: 0;
}

#app .course-list .cart-num {
  font-size: 10px;
  text-align: center;
  width: 40px;
  padding: 2px 0 3px;
  vertical-align: top;
  border: 1px solid #eee;
  outline: none;
}

#app .course-list .add-cart,
#app .course-list .minus-cart {
  padding: 0 5px;
  background-color: #fff;
  border: 1px solid #eee;
  outline: none;
}

#app .control {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

#app .select {
  display: flex;
  align-items: center;
  color: #3c3c3c;
}

#app .select-all {
  margin-right: 5px;
}

#app .price-container {
  display: flex;
  align-items: center;
}

#app .price {
  color: #f40;
  margin-right: 5px;
}

#app .accounts {
  width: 70px;
  height: 30px;
  color: rgba(255, 255, 255, 0.8);
  background-color: #f40;
  border: none;
  border-radius: 15px;
  font-size: 8px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="store">
            <input type="checkbox" v-model='checkedAll' class="select-all">
            <span class="store-name">我的商品</span>
        </div>
        <ul class="course-list">
            <li class="course" v-for='course in courseList' :key='course.id'>
                <input type="checkbox" class="course-radio" v-model='course.checked'>
                <div class="poster">
                    <img :src="course.poster" :alt="course.title">
                </div>
                <div class="content">
                    <div class="title">{{ course.title }}</div>
                    <div class="price-container">
                        <div class="price">￥ {{ course.price }}</div>
                        <div class="control-cart">
                            <button class="minus-cart" @click="controlCart('-',course)">-</button>
                            <input type="text" class="cart-num" v-model.number='course.cart'>
                            <button class="add-cart" @click="controlCart('+',course)">+</button>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="control">
            <div class="select">
                <input type="checkbox" class="select-all" v-model="checkedAll">
                <span>全选</span>
            </div>
            <div class="price-container">
                <span>合计：</span>
                <span class="price">￥ {{ selectTotalPrice }}</span>
                <button class="accounts">结算({{ selectNum }})</button>
            </div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                courseList: [
                    {
                        poster: 'https://img.alicdn.com/bao/uploaded/i1/TB1VtAgdlWD3KVjSZFs3KIqkpXa_040950.jpg_80x80.jpg',
                        title: '渡一教育 CSS3 深度剖析',
                        price: 1299,
                        cart: 1,
                        id: 0
                    },
                    {
                        poster: 'https://img.alicdn.com/bao/uploaded/i7/TB1_VJecBWD3KVjSZKPagip7FXa_045814.jpg_80x80.jpg',
                        title: '渡一教育 移动端开发课程',
                        price: 1148,
                        cart: 1,
                        id: 1595402664708
                    },
                    {
                        poster: 'https://img.alicdn.com/bao/uploaded/i2/TB1J.Q4cQxz61VjSZFto7uDSVXa_010347.jpg_80x80.jpg',
                        title: '渡一教育 2019年 HTMLCSS零基础入学宝典',
                        price: 1,
                        cart: 1,
                        id: 1596305473062
                    },
                    {
                        poster: 'https://img.alicdn.com/bao/uploaded/i2/TB1bHwlaCWD3KVjSZSgVbgCxVXa_032434.jpg_80x80.jpg',
                        title: '渡一教育 Web前端开发JavaScriptJs课',
                        price: 1,
                        cart: 1,
                        id: 1595413512182
                    },
                    {
                        poster: 'https://img.alicdn.com/bao/uploaded/i2/TB1MJd3g4z1gK0jSZSgnHevwpXa_014447.jpg_80x80.jpg',
                        title: 'Web前端开发高级工程师全阶班【渡一教育】',
                        price: 12798,
                        cart: 1,
                        id: 1596302161181
                    },
                    {
                        poster: 'https://img.alicdn.com/bao/uploaded/i6/TB1xPeAbwaH3KVjSZFpjaLhKpXa_105848.jpg_80x80.jpg',
                        title: '渡一教育 Java零基础入门到精通（集合，泛型等）',
                        price: 1,
                        cart: 1,
                        id: 1596300025301,
                    },
                ]
            },
            methods: {
                controlCart(type, course) {
                    let cartNum = course.cart;
                    if (type === '-') {
                        if (cartNum === 1) {
                            alert('1个都不买就别点了！');
                        } else {
                            course.cart--;
                        }
                    } else {
                        course.cart++;
                    }
                }
            },
            computed: {
                selectList() {
                    return this.courseList.filter(course => course.checked);
                },
                selectTotalPrice() {
                    let price = 0;
                    this.selectList.forEach(course => {
                        price += course.price * course.cart;
                    });
                    return price;
                },
                selectNum() {
                    return this.selectList.length;
                },
                checkedAll: {
                    get(){
                        return this.courseList.every(course => course.checked);
                    },
                    set(val){
                        this.courseList.forEach(course =>{
                            course.checked = val;
                        })
                    }
                }
            }
        });
        vm.courseList.forEach(course => vm.$set(course, 'checked', false));
    </script>
</body>

</html>