css比起使用js操作dom显示隐藏,性能更好,也无需更多逻辑代码
<template>
<div class="wrapper">
<div>
<h2>{{ type === 1 ? '交换顺序' : '原顺序' }}</h2>
<div :class="['box', { reverse: type === 1 }]">
<span>1</span>
<span>2</span>
</div>
<button @click="type = type === 1 ? 0 : 1">切换顺序</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
type: 0
}
}
}
</script>
<style scoped lang="scss">
@mixin flex_center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
@include flex_center();
span {
display: inline-block;
width: 40px;
height: 40px;
@include flex_center();
border: 1px solid red;
}
span:nth-child(1) {
order: 1;
}
span:nth-child(2) {
order: 2;
}
&.reverse {
span:nth-child(1) {
order: 2;
}
span:nth-child(2) {
order: 1;
}
}
}
</style>