4
uni-app之条件判断详解【uni-app小程序开发】（二）
source link: https://blog.51cto.com/u_15568258/5363416
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Table of Contents
一.前文回顾
本专栏的上一篇文章写了使用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>
我们在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>
或者使用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框架的列表渲染等用法与心得。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK