Vue3实现小案例

本篇博客咱们通过案例学习一下Vue3的部分知识点，话不多说，最终效果如下。

看淡了所冇、

3801人浏览 · 2022-11-20 18:18:42

看淡了所冇、 · 2022-11-20 18:18:42 发布

本篇博客咱们通过案例学习一下Vue3的部分知识点，话不多说，最终效果如下

整体代码逻辑

整个案例代码包括购买数量的增加和减少，不购买时移除，总价格计算，几个小功能，小功能的堆叠形成大功能。

步骤代码

结构和样式通过html和css实现，这里先不赘述，完整代码会有体现，主要关注到小功能的实现逻辑。

表单通过v-for将数据渲染到界面上，十分便利。

增加效果

点击按钮实现增加，很容易就可以想到通过写个增加方法来实现，index用来确定哪个book的购买数量增加了。

减少效果

减少和增加的实现方式相似，不过增加了v-bind来绑定disabled通过确定books的长度是否为1，来决定减少按钮是否能被点击。

移除功能

移除功能通过splice方法移除books数组的元素实现，该方法第一个参数表示开始的位置，第二个参数表示移除的数量。

总价格计算效果

总价格的计算涉及到对data中数据的处理，所以咱们使用computed计算属性，通过循环获取到每种书籍的价格和数量的乘积，最后求和。

完整代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <template v-if="books.length">
            <table>
                <thead>
                    <th>序号</th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(book, index) in books" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{book.name}}</td>
                        <td>{{book.date}}</td>
                        <td>{{formatPrice(book.price)}}</td>
                        <td>
                            <button @click="decrement(index)" :disabled="book.count <= 1">-</button>
                            <span class="counter">{{book.count}}</span>
                            <button @click="crement(index)">+</button>
                        </td>
                        <td>
                            <button @click="removeBook(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>总价格:{{formatPrice(totalPrice)}}</h2>
        </template>
        <template v-else>
            <h2>购物车为空</h2>
        </template>
    </template>
    <script src="../js/vue.js"></script>
    <script src="./test.js"></script>
</body>
</html>

index.js

Vue.createApp({
    template: '#my-app',
    data() {
        return {
            books: [
                {
                  id: 1,
                  name: '《算法导论》',
                  date: '2006-9',
                  price: 85.00,
                  count: 1
                },
                {
                  id: 2,
                  name: '《UNIX编程艺术》',
                  date: '2006-2',
                  price: 59.00,
                  count: 1
                },
                {
                  id: 3,
                  name: '《编程珠玑》',
                  date: '2008-10',
                  price: 39.00,
                  count: 1
                },
                {
                  id: 4,
                  name: '《代码大全》',
                  date: '2006-3',
                  price: 128.00,
                  count: 1
                },
              ]
        }
    },
    methods: {
        crement(index) {
            this.books[index].count++;
        },
        decrement(index) {
            this.books[index].count--;
        },
        removeBook(index) {
            this.books.splice(index, 1);
        },
        formatPrice(price) {
            return  "￥" + price
        }
    },
    computed: {
        totalPrice() {
            let finalPrice = 0;
            for (let book of this.books) {
                finalPrice += book.price * book.count
            }
            return finalPrice;
        }
    }
}).mount('#app')

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

.counter {
    margin: 0 5px;
}

心得体会

这个案例涉及到的知识不难，但是老话说的好，根基不牢，地动山摇，要牢牢掌握住基本知识。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^