一.前文回顾

本专栏的上一篇文章写了使用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框架的列表渲染等用法与心得。