主要解决了在v-for时,如何给每个item添加动态的样式,即是说,鼠标滑动到某一项时,可以单独改变某一项的样式,同时添加按钮等操作。以及删除某一项的操作。
:key="item.id"
:class="{defaultClass: itemIndex === isActive}"
@mouseenter="onMouseEnter(itemIndex)"
@mouseleave="onMouseLeave">
{{ itemIndex+1 }} :{{ item.title }}
删除({{itemIndex+1}})
export default {
name: 'HelloWorld',
data () {
return {
test: [
{
id: 1,
title: 'title first'
},
{
id: 2,
title: 'title second'
},
{
id: 3,
title: 'title third'
}
],
isActive: ''
}
},
methods: {
onMouseEnter(index) {
this.isActive = index
},
onMouseLeave() {
this.isActive = ''
},
deleteItem(index) {
this.test.splice(index, 1)
}
},
computed: {
}
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
/* display: inline-block; */
margin:10px;
}
a {
color: #42b983;
}
.defaultClass{
background-color: red;
}
阅读更多