用uniapp实现,当状态为不同值时显示不同的标签,点击有加载中的效果并且切换状态
时间: 2024-04-13 16:30:32 浏览: 25
可以通过使用条件渲染和动态绑定样式来实现这个功能。在UniApp中,可以使用v-if指令来根据状态的不同值来显示不同的标签。同时,可以使用v-show指令来根据加载状态来显示加载中的效果。下面是一个简单的示例代码:
```html
<template>
<view>
<view v-if="status === 'value1'">标签1内容</view>
<view v-if="status === 'value2'">标签2内容</view>
<view v-show="isLoading">加载中...</view>
</view>
</template>
<script>
export default {
data() {
return {
status: '',
isLoading: false
};
},
methods: {
// 点击事件处理函数
handleClick() {
this.isLoading = true;
// 模拟异步加载数据
setTimeout(() => {
// 加载完成后切换状态并停止加载中的效果
this.status = 'value2'; // 或者其他状态值
this.isLoading = false;
}, 2000);
}
}
};
</script>
```
在上面的示例中,使用了`v-if`指令来根据`status`的值显示不同的标签内容。当点击事件触发时,会将`isLoading`设置为`true`,从而显示加载中的效果。在加载完成后,会将`status`切换为其他值,并将`isLoading`设置为`false`,从而停止加载中的效果。
注意:上述示例中的点击事件函数`handleClick`需要根据你的实际需求进行修改。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)