vue.js商城购买选择界面

Posted 2020-11-11 JeneryYang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js商城购买选择界面相关的知识，希望对你有一定的参考价值。
<!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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
    let data = [{
            title: \'品牌\',
            index: -1,
            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>
</head>

<body>
    <div id="wrap">
        <section id="section">
            <nav id="choose">
                你的选择:
                <!-- <mark>锤子<a href="javascript:;">x</a></mark> -->
                <mark v-for="item 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">
        /*
            {
                0:\'苹果\',
                1:3.0
            }

            key值不重复
            key值就是每一行的下标
            思路:用对象来存每一行选中的标签,把每一行下标作为key值
            需要给数据的每一行添加一个属性,属性用来记录选中的标签

        */

        //需要处理data
        //item表示data里面的每一个对象
        //item.index表示新添的属性并且属性的值为-1

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

        new Vue({
            el:\'#wrap\',
            data: {
                dataList: data,
                choose: {}
            },
            methods: {
                addChooseHandle: function(option, index, i){
                    console.log(option,index)

                    //这样给对象添加属性并不会响应
                    //this.choose[index] = option;

                    //this.option   对象
                    //index         key值
                    //option        value值
                    this.$set(this.choose,index,option)

                    //找到操作的一行,把这一行的数据中的index,设置为点击的标签的下标
                    this.dataList[index].index = i;

                }
            }
        })
    </script>
</body>

</html>
以上是关于vue.js商城购买选择界面的主要内容，如果未能解决你的问题，请参考以下文章
购物商城小程序
014基于Vue.js的移动端购物商城网站(含源码课设报告)
vue.js实现图书购物商城