vue.js (商品分类)

古城微笑少年丶 2022-05-18 02:40 161阅读 0赞

<!doctype html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>无标题文档</title>
    
    <style>
    
    *{ margin:0; padding:0; list-style:none; font-style:normal;}
    
    .box{
    
    width:500px;
    
    border:1px solid #000;
    
    margin:100px auto;
    
    }
    
    .box p{
    
    border-bottom:1px solid #000;
    
    padding:10px 0;
    
    }
    
    .box p span{
    
    border:1px solid #000;
    
    margin-right:10px; cursor:pointer
    
    }
    
    .box p span i{ background:#f00; padding:0 5px;}
    
    li{
    
    border-bottom:1px solid #000;
    
    padding:10px 0;
    
    }
    
    a{ text-decoration:none; margin-right:10px;}
    
    a:hover,.in{
    
    background:#f00;
    
    color:#fff;
    
    }
    
    </style>
    
    </head>
    
    
    
    <body>
    
    
    
    <div class="box">
    
    <p>你的选中：<span v-for="x,i in newList"
    
    v-on:click="remove(i)"
    
    >{
       {x}}<i>X</i></span></p>
    
    <ul>
    
    <li v-for="x,i in dataInfo">
    
    <strong>{
       {x.title}}：</strong>
    
    <a href="javascript:;"
    
    v-for="y,j in x.list"
    
    v-on:click="add(y,i,j)"
    
    v-bind:class="{in:x.cIndex === j}"
    
    >{
       {y}}</a>
    
    </li>
    
    </ul>
    
    </div>
    
    <script>
    
    var dataInfo = [
    
    {
    
    title:'品牌',
    
    list:['苹果','三星','华为','小米','oppo','中兴','诺基亚']
    
    },
    
    {
    
    title:'尺寸',
    
    list:['1英寸','2英寸','3英寸','4英寸','5英寸']
    
    },
    
    {
    
    title:'内存',
    
    list:['1GB','2GB','3GB','4GB','5GB']
    
    },
    
    {
    
    title:'网络',
    
    list:['2G网络','双卡单4G','电信4G','移动4G','三网']
    
    }
    
    ]
    
    
    
    dataInfo.forEach(item => item.cIndex = -1)
    
    
    
    </script>
    
    <script src="vue.js"></script>
    
    <script>
    
    var vm = new Vue({
    
    el:'.box',
    
    data:{
    
    dataInfo,
    
    newList:{}
    
    //newList:[]
    
    /*
    
    newList:{
    
    0:苹果,
    
    1:1英寸
    
    2:1gb
    
    }
    
    */
    
    
    
    },
    
    methods:{
    
    add(a,b,c){
    
    //this.newList.push(a)
    
    //this.newList.b = a
    
    this.$set(this.newList,b,a);
    
    this.dataInfo[b].cIndex = c;
    
    },
    
    remove(a){
    
    //console.log(a)
    
    this.$delete(this.newList,a)
    
    this.dataInfo[a].cIndex = -1;
    
    }
    
    }
    
    })
    
    </script>
    
    </body>
    
    </html>