vue之过滤、筛选功能的实现

目录

筛选功能

给定一个列表(模拟数据)，根据用户输入，自动筛选输入的内容并输出到屏幕

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jQuery.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" @input="inputFunc" v-model="myText">
    <ul>
        <li v-for="i in newItemList">{{i}}</li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            myText: '',
            itemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd'],
            newItemList: ['a', 'ab', 'abc', 'b', 'bc', 'bdc', 'dbd']
        },
        methods: {
            inputFunc() {
	        // 当接收到true，则会将输入的内容返回，并写入到newItemList中，最终输出到屏幕
                this.newItemList = this.itemList.filter(
		    // 当输入的内容存在，则返回true
                    item => item.indexOf(this.myText) >= 0
                )
            }
        }
    })
</script>
</html>

不输入值，会显示所有
image

输入值后，会显示筛选后的内容
image

模拟购物车小案例

简单做一个表格，当选中一个商品，则计算价格并将总价放到页面中。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jQuery.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="./js/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车</h1>
                <br>
                <br>
                <div class="bs-example" data-example-id="striped-table">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>商品编号</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>购买数量</th>
                            <!--
                            增加全选功能，绑定checkbox单选事件：
                                1. checkbox单选默认发送true或false，选中就会发送true，不选就会发送false
                                2. 根据双向数据绑定原则，如果选中，变量shopcar列表中就会有物品的对象出现，反过事，将列表中的对象加入到shopcar
                             中的话，按钮也会被自动选中
                                3. 根据checkbox的单选特性，所以绑定一个change事件，当checkbox的值为true时，则将物品列表赋值给shopcar即可
                            -->
                            <th>全选/取消全选<input type="checkbox" v-model="checkAll" @change="changeFunc"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in good_List">
                            <th scope="row">{{item.id}}</th>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <!--添加购物车增加减少功能-->
                            <td>
                                <span><button @click="downFunc(item)">-</button></span>
                                {{item.count}}
                                <span><button @click="item.count++">+</button></span>
                            </td>
                            <td class="text-center">
                                <!--
                                全选功能相关说明：
                                1. 当一个物品未被选中时，全选按钮应该会自动取消选中
                                2. 当所有物品都被选中时，全选按钮应该自动选中
                                我们可以根据商品列表的length与shopcar的length来确定是否全选
                                如果length相同，则自动全选，如果length不同，则取消全选
                                -->
                                <input type="checkbox" v-model="shopcar" :value="item" @change="checkOneFunc">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <h3>使用for i in的合计:{{settlement()}}</h3>
                    <h3>使用for of in的合计:{{settlement2()}}</h3>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    vm = new Vue({
        el: '#app',
        data: {
            good_List: [
                {id: 1, name: '塞尔达传说:王国之泪', price: '359', count: 2},
                {id: 2, name: '战神5', price: '420', count: 1},
                {id: 3, name: '对马岛之魂', price: '375', count: 1},
                {id: 4, name: '半衰期:Alyx：', price: '321', count: 1},
                {id: 5, name: '艾尔登法环', price: '456', count: 3},
            ],
            shopcar: [],
            checkAll: false,
        },
        methods: {
            settlement() {
                let total = 0
                // 使用for i in的话，i是索引，所以需要使用this.shopcar[i]找到对应的值
                for (i in this.shopcar) {
                    total += this.shopcar[i].price * this.shopcar[i].count
                }
                return total
            },
            settlement2() {
                let total = 0
                // 使用for of in的话，i直接就是值，与上面的效果一样，但写起来更简洁
                for (i of this.shopcar) {
                    total += i.price * i.count
                }
                return total
            },
            // 添加全选事件
            changeFunc() {
                if (this.checkAll) {
                    this.shopcar = this.good_List
                } else {
                    this.shopcar = []
                }
            },
            // 每次选择一个商品的时候，都会触发这个函数，一旦这个函数监测到长度不同，就会自动取消全选，相反则会打开全选
            checkOneFunc() {
                if (this.shopcar.length === this.good_List.length) {
                    this.checkAll = true
                } else {
                    this.checkAll = false
                }
            },
            downFunc(item) {
                if (item.count > 1) {
                    item.count--
                } else {
                    alert('不能再减')
                }
            },
        }
    })
</script>
</html>
  • 最终展示如下
    image
posted @ 2023-04-06 20:39  树苗叶子  阅读(1066)  评论(0)    收藏  举报