Vue实现筛选分类

<!DOCTYPE html><html><head><title>筛选分类</title></head><style type="text/css">#warp{width: 800px;height: 260px;margin: 0 auto;border:1px ...

刘栀子

6998人浏览 · 2019-05-10 20:17:25

刘栀子 · 2019-05-10 20:17:25 发布

<!DOCTYPE html>
<html>

<head>
    <title>筛选分类</title>
</head>
<style type="text/css">
    #warp {
        width: 800px;
        height: 260px;
        margin: 0 auto;
        border: 1px solid #ccc;
        background-color: pink;
    }

    mark {
        width: 100%;
        height: 30px;
        border: 1px solid pink;
    }

    li {
        list-style: none;
        float: left;
        margin: 10px 20px 0 0;
        width: 100%;
        height: 70;
        border-bottom: 1px dashed #ccc;
    }

    #warp div {
        width: 100%;
        height: 100%;
    }

    a {
        display: inline-block;
        margin: 10px 20px 0 0;
        text-decoration: none;
    }

    .active {
        background-color: red;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="warp">
        你选择的是：
        <mark v-for="item,index in arr">
            <span>{{item.name}}</span><a href="javascript:;" @click="remove(index,item.id)">X</a>
        </mark>
        <span v-for="item,index in arr">{{item.name}}</span>
        <div>
            <ul>
                <li v-for="item,index in listData">
                    <span>{{item.title}}:</span>
                    <a href="javascript:;" v-for="option,i in item.list" v-bind:class="{active:item.index===i}"
                        @click="listBundle(option,index,i)">{{option}}
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">

        //   思路：用户点击的时候
        // -> 获取点击的option和数据的这一列的index值
        // ->将每次点击的值存放在数组里面
        // ->以index当做唯一标识
        // ->判断index是否存在,存在则将最后点击的option赋值给当前index
        // ->然后移除最后点击的这一列数据
        // 

        var phoneData = [
            {
                title: '手机',
                list: ['小米6', '一加5', '荣耀9', '红米Note', '4X', '华为-mate 9', '红米4X', '美图M8', '锤子-坚果', 'PRO']
            },
            {
                title: '平板',
                list: ['小米6', '一加5', '荣耀9', '红米Note', '4X', '华为-mate 9', '红米4X', '美图M8', '锤子-坚果', 'PRO']

            },
            {
                title: '电脑',
                list: ['小米6', '一加5', '荣耀9', '红米Note', '4X', '华为-mate 9', '红米4X', '美图M8', '锤子-坚果', 'PRO']
            },
            {
                title: '数码',
                list: ['小米6', '一加5', '荣耀9', '红米Note', '4X', '华为-mate 9', '红米4X', '美图M8', '锤子-坚果', 'PRO']
            }
        ];
        phoneData.forEach(item => item.index = -1);
        var wrap = new Vue({
            el: '#warp',
            data: {
                listData: phoneData,
                arr: []
            },
            methods: {
                listBundle(option, index, i) {
                    //找到操作的这一行，把这一行的数据中的index，设置为点击的标签的下标 
                    this.listData[index].index = i;
                    let param = {  //获取到元素的index 和 name
                        id: index,
                        name: option
                    }
                    this.arr.push(param)  //将获取的元素放到数组里面
                    // 用户点击重复的之后去除重复的数据 保证只存在一个相同的id
                    for (let i = 0; i < this.arr.length; i++) {
                        for (let j = i + 1; j < this.arr.length; j++) {
                            if (this.arr[i]['id'] == this.arr[j]['id']) { //判断是否存在重复的
                                // 将最后点击的id的name 赋值给现有的id里面的name
                                this.arr[i]["name"] = this.arr[j]['name']
                                this.arr.splice(j, 1) // 移除数据里面重复的
                            }
                        }
                    }
                },
                remove(index, id) {
                    this.$delete(this.arr, index, 1);  //删除arr里面用户点击的id
                    this.listData[id].index = -1;
                }
            }
        });
    </script>
</body>
</html>

最终实现效果展示

在这里插入图片描述

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}$/, //不连续的两位字母// /^