自己写的一个vue商城产品筛选小功能

原创 zhouwenqi417 随笔 vue 174阅读 27 天前 举报

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
.clear{clear: both;}
.wrap{width: 1200px;margin: 50px auto;}
.wrap .wrap_header{width: 100%;padding:15px 10px;box-sizing: border-box;background: rgba(195,239,255,0.3);}
.wrap .wrap_header h1{display: inline;color: #666;font-size: 15px;}
.wrap .wrap_header span{display: inline-block;padding: 2px 10px;background: #ffe4c6;color: #f78000;border: 1px solid #ffbf7b;font-size: 12px;border-radius: 5px;margin-right:30px;position: relative;}
.wrap .wrap_header span .pos{position: absolute;top: -1px;right: -15px;display: block;width: 15px;height: 100%;background: #ff9191;;color: #fff;text-align: center;border:1px solid #ff9191;border-radius: 0 5px 5px 0;cursor: pointer;}
.wrap .contenter{background: rgba(235,250,255,0.3);padding:15px;box-sizing: border-box;}
.wrap .block{width: 100%;float: left;padding: 15px 0;border-bottom: 1px dashed #e5e5e5;}
.wrap .block:nth-of-type(4){border: none;}
.wrap .block .title{float: left;color: #f78000;font-size: 15px;margin-right: 30px;}
.wrap .block ul{float: left;}
.wrap .block ul li{float: left;font-size: 13px;color: #666;margin-right: 20px;line-height: 22px;
cursor: pointer;}
.wrap .block ul li.one{background: rgba(195,239,255,0.3)}
</style>
</head>
<body>
<div class="wrap" id="app">
<div class="wrap_header">
<h1>你的选择:</h1>
<span class="cont" v-for="abc,i of cont">{{abc}}<div class="pos" @click="remove(abc,i)">x</div></span>
</div>
<div class="contenter">
<div class="block" v-for="item,i in date">
<div class="title">{{item.title}}</div>
<ul>
<li v-for="con in item.list" @click="addcontent(con.text,i)">{{con.text}}</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>;
<script>
var datalist=[
{
title:'品牌',
id:'1',
list:[
{text:'苹果'},
{text:'三星'},
{text:'小米'},
{text:'华为'},
{text:'中兴'},
{text:'联想'},
{text:'oppo'},
{text:'360手机'},
]
},
{
title:'尺寸',
id:'2',
list:[
{text:'3.0寸以下'},
{text:'3.0-3.9英寸'},
{text:'4.0-4.5英寸'},
{text:'4.6-4.9英寸'},
{text:'5.0-5.5英寸'},
{text:'6.0-6.5英寸'},
]
},
{
title:'系统',
id:'3',
list:[
{text:'IOS系统'},
{text:'Android系统'},
{text:'Window系统'},
]
},
{
title:'网络',
id:'4',
list:[
{text:'联通3G'},
{text:'双卡单4G'},
{text:'双卡双4G'},
{text:'联通4G'},
{text:'电信4G'},
{text:'移动4G'}
]
},
]

var vm=new Vue({
    el:'#app',
    data:{
        date:datalist,
        cont:{},
    },
    methods:{
        addcontent:function(index,con){
            this.$set(this.cont,con,index)
        },
        remove:function(index,con){
            this.$delete(this.cont,con,index)
        }
    }
})

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复