vue中v-for通过动态绑定class实现触发效果

时间:2021-05-26

vue动态绑定class练习。

:class=“{ ‘类名1':条件表达式,‘类名2':条件表达式… }”

<template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class="{'click':i==clickIndex}" ></li> </ul> </div></template><script>export default { data() { return { list: [1, 2, 3, 4], clickIndex: -1 }; }, methods: {}};</script><style scoped>.item { display: inline-block; width: 100px; height: 100px; cursor: pointer; border: 1px solid black;}.item:hover { background: gray;}.item.click { background: red;}</style>

补充:vue之v-for中给每个item动态绑定class,动态添加元素,动态删除某个元素的实现

主要解决了在v-for时,如何给每个item添加动态的样式,即是说,鼠标滑动到某一项时,可以单独改变某一项的样式,同时添加按钮等操作。以及删除某一项的操作。

<template> <div class="hello"> <ul> <li v-for="(item, itemIndex) in test" :key="item.id" :class="{defaultClass: itemIndex === isActive}" @mouseenter="onMouseEnter(itemIndex)" @mouseleave="onMouseLeave"> {{ itemIndex+1 }} :{{ item.title }} <button v-if="isActive === itemIndex" @click="deleteItem(itemIndex)">删除({{itemIndex+1}})</button> </li> </ul> </div></template><script>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: { }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { margin:10px;}a { color: #42b983;}.defaultClass{ background-color: red;}</style>

总结

以上所述是小编给大家介绍的vue中v-for通过动态绑定class实现触发效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章