vue中集合加元素_vue之v-for中给每个item动态绑定class，动态添加元素，动态删除某个元素的实现...

主要解决了在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;

}

阅读更多