如何上下箭头切换?视图 [英] How to arrow toggle up and down? Vue
本文介绍了如何上下箭头切换?视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何通过单击更改向上和向下箭头图标?我想点击激活上级或下级.
<i class="向下箭头"></i>isToggled: 假箭头切换(事件){this.isToggled = !this.isToggled;}.下 {变换:旋转(45度)；}.向上 {变换:旋转(-135度)；}
解决方案
<div><div v-for="项目中的项目"><div @click="item.isToggle = !item.isToggle><i :class="{ 'down': item.isToggled }" class="arrow"></i></模板><脚本>导出默认{数据 () {返回 {项目: []}},挂载(){const itemsFromApi = [ ... ]this.items = itemsFromApi.map(item => {item.isToggle = false归还物品})}}<风格>.箭 {变换:旋转(-135度)；}.arrow.down {变换:旋转(45度)；}</风格>
How do I change the up and down arrow icon at a click? I want to click to activate up or down class.
<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);
}
解决方案
<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>
这篇关于如何上下箭头切换?视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
