卧疾丰暇豫,翰墨时间作。这篇文章主要讲述uni-app之条件判断详解uni-app小程序开发相关的知识,希望能为你提供帮助。
@[toc]
一.前文回顾本专栏的上一篇文章写了使用uni-app开发非原生小程序的:
1.v-bind:数据变量
2.v-on:绑定事件
3.v-model:双向绑定
以及export default初始化对象等等。
我们本文研究,条件判断。
二.干货学习
2.1 条件判断:v-ifv-if:决定某个内容或区块是否挂载。
我们尝试使用一个简单的if判断条件看一下。
<
view v-if="false">
mxa<
/view>
我们在data数据集里写下msg的值:
data()
return
mxa: 我显示了,
因为我们的if条件为true为真,所以下面的“我显示了”这句话会正常显示输出!
效果如下:
文章图片
如果改为:
<
view v-if="false">
mxa<
/view>
if判断的条件为假,则“我显示了”这句话不会正常显示输出。
【uni-app之条件判断详解uni-app小程序开发】拓展:
我们还可以把布尔类型写到数据集里,这样更加友好。
做法非常简单,如下;
return
msg: Hello,
arr: [1, 2, 3],
flag: true,
mxa: 我显示了,
<
view v-if="flag">
mxa<
/view>
这样v-if里的flag会自动调用data数据集里的布尔值,执行条件判断语句。
后续我们可以写一些变式,计时器等等,来控制它的使用。
当然我们还可以使用else:
<
view v-if="flag">
mxa<
/view>
<
view v-else>
其他情况<
/view>
这块应该很好理解吧。截图看一下:
文章图片
我们可以进阶的思考一下:
点击按钮交替显示内容:
methods:
show()
console.log(你好上进小菜猪);
this.flag= !this.flag;
文章图片
2.2 条件判断:v-showv-show:是否显示。
这里要注意v-show和v-if的区别。
文章图片
2.3 空标签uni-app框架的语法是靠近与小程序的语法的,所以空标签可以用:
<
block>
<
/block>
或者使用uni-app的空标签:
<
template>
<
/template>
俩个效果一样,贴近于微信小程序,但是还是推荐使用
<
block>
<
/block>
三,本文总结/下文预告 3.1 本文总结本文讲解了条件判断的v-if和v-show的用法和区别
1.条件判断:v-if决定某个内容或区块是否挂载。
2.条件判断:v-show:是否显示。
还有空标签的俩种用法:
1,这个是贴近于微信小程序的写法。
<
block>
<
/block>
2.这个是的uni-app框架的写法。
<
block>
<
/block>
俩者效果一样。
3.2 下文预告下篇文章记录uni-app框架的列表渲染等用法与心得。
文章图片
推荐阅读
- MapReduce #导入Word文档图片#
- 从第一碗粉到云手机,天心很行
- 平面设计有哪几种设计风格,分享平面设计的12种风格
- 4G/5G无线便携式录播主机使用哪种无线摄像机匹配好
- JS逆向入门学习之回收商网,手机号码简易加密解析
- HBase Shell操作HBase创建表添加数据查看表数据操作列簇删除表
- 深度分析NFT盲盒卡牌dapp系统开发(源码详情)
- #yyds干货盘点# leetcode算法题(括号生成)
- 替代LT8711UX方案|TypeC转HDMI(4K60HZ)高清视频转换芯片方案简介