Vue 排序（上下箭头切换）

最新推荐文章于 2024-10-14 09:02:11 发布

୧(不負眾望)૭

最新推荐文章于 2024-10-14 09:02:11 发布

阅读量5.6k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Huang_DW/article/details/107485954

版权

本文介绍了两种在Vue.js中实现排序的方法，适用于列表上下箭头切换排序状态的场景，详细阐述了具体步骤和代码实现。

摘要由CSDN通过智能技术生成

第一种：

<template>
	<div>
	
		<!-- 排序 -->
		<div class="list-sort">
			<div>综合</div>
			<div style="display: flex;align-items: center;">
				<div @click="onSort">价格</div>
				<div>
					<div :class="{'active':isSort==1}" class="iconfont icon-jiantou"></div>
					<div :class="{'active':isSort==2}" class="iconfont icon-jiantouxia"></div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
   
		data(){
   
			return{
   
				list:[],
				isSort:0 //1为升序，2为降序
			}
		},
		methods:{
   
			onSort(){