一、需求
点击筛选英雄
双向绑定
<template>
<div class="box">
<h1>王者荣耀选英雄</h1>
<div class="wrap">
<span v-for="item in arr" :key="item">
<label><input type="radio" :value="item" v-model="hero" >{{item}}</label>
</span>
</div>
<div class="grid" v-for="item in data" :key="item.pic">
<p>
<img :src="'/images/'+`${item.pic}.jpg`" alt="">
</p>
<p>{{item.cname}}</p>
<p>{{item.title}}</p>
<div class="mask" v-show="item.hero_type !== hero && item.hero_type2 !== hero && hero !== '全部'"></div>
</div>
</div>
</template>
<script>
import data from './data.js';
export default {
data() {
return {
data: data,
hero: '全部',
arr: ['全部','坦克','战士','刺客','法师','射手','辅助']
}
},
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
margin: 20px auto;
overflow: hidden;
}
.box h1{
text-align: center;
}
.wrap{
padding: 10px;
}
.wrap span{
margin: 0 10px;
}
.grid{
width: 60px;
border: 1px solid #ccc;
float: left;
font-size: 12px;
text-align: center;
margin: 3px;
padding: 4px;
position: relative;
color: #666;
}
.grid img{
width: 100%;
}
.mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
position: absolute;
top: 0;
left: 0;
}
</style>
