vue 1-3 学习过渡案例

实例需求：简单的购物车页

　　1. 样式要求：

　　2. 代码要求

　　　　1. 按照原始的HTML、css、JS三个文件来构建页面需求

　　　　2. HTML中使用vue的插值指令调用JS文件等

　　　　3. 涉及到的知识点有：

　　　　　　1. 导入css、vue.js模块

　　　　　　 2.vue模块中的插值指令（

　　　　　　　　v-on：绑定点击等触发事件

　　　　　　　　v-bind：绑定Dom标签中的属性，如v-bind：class绑定样式

　　　　　　　　v-for：循环（(value, key, index) in 可迭代对象、、、或、、、（value, index）in 数组）

　　　　　　　　v-if：判断

　　　　　　）

　　　　　　3.过滤器，在自定义的js代码中在vue对象中创建过滤器　

// 使用vue模块中的filters方法，在其中增加过滤器函数:
filters: {
        showPrice(price){
            return '￥' + price.toFixed(2)
        }
// 调用：调用vue对象中的 变量 或 函数 时，变量值 或 函数返回值 作为 参数 传入 过滤器

// HTMl使用：
<td>{{item.price | showPrice}}</td>

// 或

<h2>总价格：{{totalPrice | showPrice}}</h2>

　　　　　　4. disabled属性控制Dom中的标签

<button @click="decrement(index)" v-bind:disabled="item.count <=1">-</button>   <!--数量小于等于1时不可以再减-->

　　　　　　5. 删除对象中的某个值操作

// 移除操作(splice(2, 2)，表示从第2位开始删除元素，删除此元素开始算的2位)
        delBook(index){
            return this.books.splice(index, 1)
        },

　　3. 结果：

　　　　1. 得到图像类似展示页

　　　　2. 数量可以增加或减少（数量为1时不可以减），总价格随之变动

　　　　3. 可以移除商品，当全部移除时提示：“购物车为空”

HTML：

　　index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--第一步：导入css样式-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--第三步：简单搭建HTML-->
<div id="app">
    <div v-if="books.length">
        <table>
            <thead>
                <tr>
                    <th v-for="item in getTitle()">{{item}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in books">
                    <td>{{item.num}}</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>   <!--数量小于等于1时不可以再减-->
                        {{item.count}}
                        <button @click="increment(index)">+</button>
                    </td>
                    <td><button @click="delBook(index)">移除</button></td>
                </tr>
            </tbody>
        </table>
        <h2>总价格：{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else>购物车位空</h2>
</div>

<!--第二步：导入vue模块和自定义main模块-->
<script src="../../js/vue.js"></script>
<script src="main.js"></script>

</body>
</html>

CSS ：

　　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;
}

JS：

main.js

const app = new Vue({
    el: '#app',
    data: {
        books: [
            {
                num: 1,
                name: '佛本是道',
                data: '2021-10-11',
                price: 100.00,
                count: 1,
            },
            {
                num: 2,
                name: '佛本是道2',
                data: '2021-10-12',
                price: 100.00,
                count: 1,
            },
            {
                num: 3,
                name: '佛本是道3',
                data: '2021-10-13',
                price: 100.00,
                count: 1,
            },
            {
                num: 4,
                name: '佛本是道4',
                data: '2021-10-14',
                price: 100.00,
                count: 1,
            },
        ]
    },
    // 计算属性
    computed: {
        totalPrice() {
            let totalprice = 0
            // for (let i = 0; i<this.books.length; i++){
            //     totalprice += this.books[i].price * this.books[i].count
            //     }
            for (let item of this.books){
                totalprice += item.price * item.count
            }
            return totalprice
            }
        }
        ,
    methods: {
        // 获取列表头部
        getTitle(){
            return ['', '数据名称', '出版日期', '价格', '购买数量', '操作']
        },
        // 数量减少操作
        increment(index){
            return this.books[index].count++
        },
        // 数量增加操作
        decrement(index){
            return this.books[index].count--
        },
        // 移除书籍操作(splice(2, 2)删除元素从第2位开始删除2个)
        delBook(index){
            return this.books.splice(index, 1)
        },
    },
    filters: {
        showPrice(price){
            return '￥' + price.toFixed(2)
        }
    }
})

posted @ 2021-03-11 18:26 黑无常阅读(115) 评论(0) 收藏举报

刷新页面返回顶部

黑无常

vue 1-3 学习过渡案例

公告