vue v-else-if 使用

最新推荐文章于 2024-11-02 10:27:53 发布

原创最新推荐文章于 2024-11-02 10:27:53 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #uni-app #html5

ui前端同时被 2 个专栏收录

2 篇文章

订阅专栏

uni-app

2 篇文章

订阅专栏

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

实现效果：一个事件有三个状态（//状态判断, 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;
				}
			},
			
			stateIcon2(e){
				if( e === 2){
					return true;
				}
			},
						
			stateIcon0(e){
				if( e === 0){
					return true;
				}
			},

方法2：用 v-else-if 实现

<u-icon name="checkmark-circle-fill" color="#04db76" size="33" v-if="item.state===1"></u-icon>
<u-icon name="error-circle-fill" color="#f30908" size="33" v-else-if="item.state===2"></u-icon>
<u-icon name="minus-circle-fill" color="#F4770A" size="33" v-else="item.state===0"></u-icon>