Mikel
来源： uni-app之条件判断详解【uni-app小程序开发】（二）_uniapp if_上进小菜猪的博客-CSDN博客
文章目录
一.前文回顾
二.干货学习
2.1 条件判断：v-if
2.2 条件判断：v-show
2.3 空标签
三，本文总结/下文预告
3.1 本文总结
3.2 下文预告
一.前文回顾
本专栏的上一篇文章写了使用uni-app开发非原生小程序的：
1.v-bind：数据变量
2.v-on：绑定事件
3.v-model：双向绑定
以及export default初始化对象等等。
我们本文研究，条件判断。
二.干货学习
2.1 条件判断：v-if
v-if：决定某个内容或区块是否挂载。
我们尝试使用一个简单的if判断条件看一下。
<view v-if=”false”>{{mxa}}</view>
1
我们在data数据集里写下msg的值：
data() {
return {
mxa: ‘我显示了’
}
},
因为我们的if条件为true为真，所以下面的“我显示了”这句话会正常显示输出！
效果如下：
如果改为：
<view v-if=”false”>{{mxa}}</view>
if判断的条件为假，则“我显示了”这句话不会正常显示输出。
拓展：
我们还可以把布尔类型写到数据集里，这样更加友好。
做法非常简单，如下;
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-show
v-show：是否显示。
这里要注意v-show和v-if的区别。
2.3 空标签
uni-app框架的语法是靠近与小程序的语法的，所以空标签可以用：
<block></block>
1
或者使用uni-app的空标签：
<template></template>
1
俩个效果一样，贴近于微信小程序，但是还是推荐使用
<block></block>
1
三，本文总结/下文预告
3.1 本文总结
本文讲解了条件判断的v-if和v-show的用法和区别
1.条件判断：v-if决定某个内容或区块是否挂载。
2.条件判断：v-show：是否显示。
还有空标签的俩种用法：
1，这个是贴近于微信小程序的写法。
<block></block>
1
2.这个是的uni-app框架的写法。
<block></block>
1
俩者效果一样。
3.2 下文预告
下篇文章记录uni-app框架的列表渲染等用法与心得。
————————————————
版权声明：本文为CSDN博主「上进小菜猪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_52908342/article/details/125153853
