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 { /* display: inline-block; */ margin:10px; } a { color: #42b983; } .defaultClass{ background-color: red; } </style>
总结
以上所述是小编给大家介绍的vue中v-for通过动态绑定class实现触发效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]