console
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div class="t-recommed-r" v-for="(item,index) in list" :key="index">
<p>
<span>
</span>
{{ item.name }}
<span>
</span>
</p>
<ul>
<li v-for="(val,key) in item.data" :key="key" @click="checkTab(val.id)">
<label v-for="(v, k) in checkedList" :key="k" v-show="val.id === v">
<input type="checkbox" :checked="val.id === v">
<i>
✓
</i>
</label>
<a>
<img src="https://pic3.zhimg.com/80/v2-5e5e74569203d5f8f331836845cb7a5a_720w.jpg">
<em>
{{ val.name }}
</em>
</a>
</li>
</ul>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
<script>
new Vue({
el: '#app',
data: function() {
return {
checkedList: [],
list: [{
name: "232"
}]
}
},
methods: {
checkTab(id) {
let index = this.checkedList.indexOf(id) if (index === -1) {
this.checkedList.push(id)
} else {
this.checkedList.splice(index, 1)
}
}
}
})
</script>
<style>
label { font-size: 25px; cursor: pointer; position: absolute; top: -10px;
right: 0px; z-index: 150; } label i { font-size: 15px; font-style: normal;
display: inline-block; width: 18px; border-radius: 15px; height: 18px;
text-align: center; line-height: 18px; color: #fff; vertical-align: middle;
margin: -2px 2px 1px 0px; border: #53c7f0 1px solid; } input[type="checkbox"],
input[type="radio"] { display: none; outline: none; } input[type="radio"]+i
{ border-radius: 7px; } input[type="checkbox"]:checked+i, input[type="radio"]:checked+i
{ background: #fff; color: #53c7f0;
</style>
</html>