vue v-else-if 使用

white u

于 2021-12-13 16:42:16 发布

阅读量2.2k

点赞数

分类专栏： ui前端 uni-app 文章标签： vue.js 前端 javascript uni-app html5

本文链接：https://blog.youkuaiyun.com/qq_44104321/article/details/121908738

版权

本文探讨了如何在 Vue.js 应用中使用 v-else-if 指令来实现状态判断。通过两种不同的方法展示了如何处理一个事件的三种状态：正常、异常和进行中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：一个事件有三个状态（//状态判断, 1:正常； 2:异常； 0:进行中）

方法1：用 v-if 实现

				<u-icon name="checkmark-circle-fill" color="#04db76" size="33" v-if="stateIcon1(item.state)"></u-icon>
				<u-icon name="error-circle-fill" color="#f30908" size="33" v-if="stateIcon2(item.state)"></u-icon>
				<u-icon name="minus-circle-fill" color="#F4770A" size="33" v-if="stateIcon0(item.state)"></u-icon>

js
methods里

			stateIcon1(e){
				if( e === 1){
					return true;
				}
			},

最低0.47元/天解锁文章