如何使用箭头进行上下切换？Vue
如何使用箭头进行上下切换？Vue
提问于 2020-02-21 05:32:54
如何一键更改向上和向下箭头图标？我想点击激活向上或向下类。
<div class="base-box base-box__accordion-sec" @click="arrowToggle()">
<i class="arrow down"> </i>
</div>
isToggled: false
arrowToggle(event) {
this.isToggled = !this.isToggled;
}
.down {
transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
}回答 2
Stack Overflow用户
发布于 2020-02-21 05:39:19
<i v-bind:class="{ 'down': isToggled, 'up': !isToggled }" class="arrow"> </i>Stack Overflow用户
发布于 2020-02-21 05:48:27
<template>
<div>
<div v-for="item in items">
<div @click="item.isToggle = !item.isToggle>
<i :class="{ 'down': item.isToggled }" class="arrow"> </i>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
items: []
}
},
mounted () {
const itemsFromApi = [ ... ]
this.items = itemsFromApi.map(item => {
item.isToggle = false
return item
})
}
}
</script>
<style>
.arrow {
transform: rotate(-135deg);
}
.arrow.down {
transform: rotate(45deg);
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60328841
复制相关文章
相似问题
腾讯云开发者
