uniapp v-if绑定页面加载事件

最新推荐文章于 2024-09-02 17:55:11 发布
原创 最新推荐文章于 2024-09-02 17:55:11 发布 · 805 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

该博客介绍了如何在Vue.js应用中根据数据状态动态展示不同的图标。通过`stateIcon`方法判断状态值，实现状态为0时返回相应图标。文章着重讨论了 Vue 中的数据绑定和条件渲染，对于前端开发者理解状态管理和视图更新具有指导意义。

要实现页面效果：循环数据根据状态展示不同图标

如图

 

 

 

		methods: {
			stateIcon(e){
				if( e === 0){
					return true;
				}
			},	
		},

注意：state里面的状态值不要字符串“0”和 0 的区别

white u
关注
uniapp vue在onload 和onshow获取不到接口返回的数据
前端程序员、项目经理、人工智能博主
10-31 9564
总所周知uniapp的接口是异步的，所以我们可以用promise await async去解决这个问题 methods:{ getDtail(){ return new Promise((resolve,reject)=>{ //接口调用的方法放在这里，成功的话调用resolve resolve(res)//res是你自己定义的返回值 }) } } 下面接口案例，仅供参考: 接下来是重点操作我们要在onShow或者onLoad方法去获取这个接口返回成功的数据 //o.
uniapp 中tab切换多个单页面跳转v-if 和 click点击事件配合web页面也适用
m0_49714202的博客
05-21 1512
<template> <view class="page"> <view class="content flex" > <!-- D --> <view class="left" > <view class="left_title" @click="linkA()"> A标题 </view> <view class="left_txt" v-if="type
uni-app 事件加载事件
weixin_45932157的博客
04-15 2679
<template> <view> <demo_test v-if="flag"></demo_test> <button type="primary" v-on:click="checktest">切换test组件</button> </view> </template> <script> import test from "@/components/test/demo_t
【uni app 通过 v-if 实现视图切换】
奋进的小羊的博客
07-26 593
"304不锈钢，100*100，板厚T=1.0"// mounted功能为页面挂载的时候自动触发。"304不锈钢，100*50，板厚T=1.0""镀锌板，100*300，板厚T=1.0"// 切换列表/宫格组件显示状态。// 控制组件显示状态的变量。
Vue基础语法 事件绑定:v-on: v-if: v-for: (四)
weixin_46022934的博客
12-02 1173
1.v-on(绑定事件) 2.v-if 3.v-for遍历
uni-app上拉加载事件
wang5590的博客
06-30 1174
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue" export default { components: { uniLoadMore, }, data() { return { status: 'more', currentPage:1, totalPages :0, statusTypes: [{ value: 'more', te
【修复日常bug】（uniapp）微信小程序自定义组件无法触发（不执行）v-model双向绑定监听事件
技术大咖 Rohlin的博客
08-16 3889
问题概述 数组数据改变后，页面上视图也重新渲染了，但是视图内的自定义组件绑定的v-model事件并没有执行； 问题原因(举个例子) 在经过一番排查后，发现外层有v-if事件调用了handler函数进行判断导致的 <!-- 循环数组 --> <view v-for="(item,index) of list" :key="index"> <!-- v-if调用了函数 --> <view v-if="handler(item)">
uniapp scroll-view上拉加载自定义
03-19
在 UniApp 开发中，可以通过监听 `scroll-view` 的滚动事件来实现上拉加载的功能。以下是详细的说明以及代码示例。 #### 原理概述 为了实现上拉加载功能，可以利用 `scroll-view` 提供的绑定事件 `...
uniapp scroll-view触顶加载
01-07
为了实现在 UniApp 中当用户滚动到顶部时自动加载更多内容的功能，可以利用 `scroll-view` 提供的相关事件和属性来完成这一需求。具体来说，可以通过监听用户的滚动行为并判断其位置是否接近页面顶端来进行处理。 #...
uniapp v-html内'uni-table' 并不能加载uni-table的样式
最新发布
10-21
我们正在解决UniApp中使用v-html加载包含uni-table标签的HTML内容时，uni-table样式无法加载的问题。 根据用户提供的引用，我们得知uni-table需要特定的组件结构和初始化过程，而v-html内的标签不会被作为组件处理...
【vue】事件绑定、样式绑定及v-if、v-show、v-for渲染
webxuj的博客
08-30 909
可以阻止冒泡，阻止从当前元素经过的所有冒泡行为。事件只触发一次,触发完之后,事件就会解绑。绑定点击事件 可以简写方式。添加事件侦听器时让事件在捕获阶段触发。嵌套的标签会有冒泡行为，使用。......
解决uniapp开发微信小程序手机端出现v-if加载全部条件问题（闪屏问题）
weixin_44902450的博客
12-21 4476
项目背景： 在做v-if判断时，进入页面，请求接口获取数据并赋值，如果数组长度为0则显示空白提醒图片，否则显示数据渲染的列表。 问题描述： 提示：这里描述项目中遇到的问题： 页面会首先闪过出现提醒图片，然后消失，再显示列表页。 解决方案： 在data中另外申请一个变量tag, 值为0，数据请求完成之后，令data的值为1，然后在页面上判断tag 和 你自己本来判断的内容，另外，v-else就不用了，用v-if来代替。 <view v-if="tag === 1 && list.l
uniapp之v-if篇
热门推荐
weixin_44320857的博客
02-08 2万+
v-if和v-show 共同点 都能够控制元素的显示或者是隐藏 手段的区别 v-if指令是先经过判断是否经过，才会创建DOM节点，根据DOM节点来控制显示与隐藏 v-show指令是通过改变元素的CSS属性来决定元素是显示还是隐藏。display:block或者display:none 编译过程的区别 v-if指令的条件渲染，取决于，是真是假，在切换过程中，条件块内的事件监听和子组件会被销毁和重建 v-show指令总是会被渲染，只是单纯的基于css进行切换 开销问题 v-if指令有更高的切换开销
uniapp向上拉加载，下拉刷新
wendy_qx的博客
12-19 3663
如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。首先需要在pages.json中找到需要下拉刷新的页面，配置enablePullDownRefresh为true。比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。可在pages.json里定义具体页面底部的触发距离。
[uni-app基础]使用v-if和@click事件绑定，控制页面元素view组件的显示与隐藏
辣笔小茶的博客
06-12 2063
通过data-vid自定义需要控制显示和隐藏的view组件id，此处为“0”，下一个则为“1"，以此类推,（为方便演示此处用比较机械的方法。如果需要控制显示和隐藏的组件很多，则需要优化此处代码）
小白初学Vue之绑定事件，属性绑定、双向绑定、v-if自学第二篇~
weixin_30515513的博客
07-02 292
事件绑定:v-on: 属性绑定 v-bind: 双向绑定:v-model 实现数据的双向绑定 效果如下： a.属性绑定 b.双向数据绑定 b1.b2. <div id="root"> <!--事件绑定--> <div v-on:click="clicks">{{title}}</div> <!--此句...
VUE3与Uniapp 五 （v-if、v-show和template、v-for的使用）
weixin_41703489的博客
04-28 1083
【代码】VUE3与Uniapp 四 （v-if、v-show和template的使用）
uni-app v-if条件渲染和v-show的选择对比
2403_86913316的博客
09-02 1423
v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染也可以使用v-else为v-if添加一个“else 区块，如上为示例，返回true时为京东，返回false时为淘宝网。v-else元素必须跟在一个v-if或者v-else-if元素后面，否则它将不会被识别顾名思义，v-else-if提供的是相应于v-if的“else if 区块”。它可以连续多次重复使用和v-else类似，一个使用v-else-if的元素必须紧跟在一个v-if或一个v-else-if元素后面。
uniapp语法（vue语法）
m0_65174781的博客
03-08 2204
模板指令条件渲染v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。v-else你也可以使用 v-else 为 v-if 添加一个“else 区块”v-else-if顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。列表渲染v-for。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值