vue 商品筛选

最新推荐文章于 2021-12-13 19:49:25 发布

asd2014916

最新推荐文章于 2021-12-13 19:49:25 发布

阅读量171

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/MR-cui/p/10723374.html

版权






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            font-size: 14px;
            font-family: "Lantinghei SC Extralight",Arial;
        }
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        img {
            vertical-align: top;
        }
        #wrap {
            width: 760px;
            height: 260px;
            margin: 100px auto;
            padding: 145px 120px 95px;
            background: url(img/bg.jpg) no-repeat 0 0;
        }
        #section {
            width: 760px;
            height: 260px;
            -moz-box-shadow: 0px 0px 4px rgba(0,0,0,.2); 
            box-shadow: 0px 0px 4px rgba(0,0,0,.2);
        }
        #choose {
            width: 760px;
            height: 50px;
            margin: 0 auto;
            background: url(img/nav_bg.png) no-repeat 0 0;
            line-height: 50px;
            text-indent: 21px;
        }
        #type {
            width: 100%;
            height: 210px;
            background: url(img/type_bg.png) no-repeat 0 0;
            padding: 17px 0 16px 28px;
        }
        #type li {
            height: 44px;
            color: #8a8a8a;
            line-height: 44px;
        }
        #type a {
            margin: 0 12px 0 11px;
            color: #000;
        }
        #choose mark {
            position: relative;
            display: inline-block;
            height: 24px;
            line-height: 24px;
            border: 1px solid #28a5c4;
            color: #28a5c4;
            margin: 12px 5px 0;
            background: none;
            padding: 0 30px 0 6px;
            text-indent: 0;
        }
        #choose mark a {
            position: absolute;
            top: 3px;
            right: 2px;
            display: inline-block;
            width: 18px;
            height: 18px;
            background: #28a5c4;
            color: #fff;
            line-height: 18px;
            font-size: 16px;
            text-align: center;
        }
        .active {
            background: rgb(40, 165, 196);
        }
    </style>
    <script type="text/javascript">
        let data = [
            {
                title: '品牌',
                list: ["苹果", "小米", "锤子", "魅族", "华为", "三星", "OPPO", "vivo", "乐视", "360", "中兴", "索尼"]
            },
            {
                title: '尺寸',
                list: ["3.0英寸以下", "3.0-3.9英寸", "4.0-4.5英寸", "4.6-4.9英寸", "5.0-5.5英寸", "6.0英寸以上"]
            },
            {
                title: '系统',
                list: ["安卓", "(", "Android", ")", "苹果", "(", "IOS", ")", "微软", "(", "WindowsPhone", ")", "无", "其他"]
            },
            {
                title: '网络',
                list: ["联通3G", "双卡单4G", "双卡双4G", "联通4G", "电信4G", "移动4G"]
            }
        ]
    </script>
    <script src="../src/vue.js"></script>
</head>
<body>
    <div id="wrap">
        <section id="section">
            <nav id="choose">
            你的选择:
            <mark @click="removeHandle(key)" v-for="item,key in choose">
                {{item}}
                <a href="javascript:;">x</a>
            </mark>
            </nav>
            <ul id="type">
                <li v-for="item,index in dataList">
                    {{item.title}}：
                    <a 
                        href="javascript:;"
                        v-for="option,i in item.list"
                        v-bind:class="{active: item.index === i}"
                        @click="addChooseHandle(option,index,i)"
                    >{{option}}</a>
                </li>
            </ul>
            
        </section>
    </div>
    <script type="text/javascript">

        data.forEach(item => item.index = -1);

        new Vue({
            el: '#wrap',
            data:{
                dataList: data,
                choose: {} 
            },
            methods: {
                addChooseHandle (option,index,i) {
                    this.$set(this.choose,index,option)
                    this.dataList[index].index = i;
                },
                removeHandle (key) {
                    this.$delete(this.choose,key)
                    this.dataList[key].index = -1;
                }
            }
        })

    </script>
</body>
</html>