5.1.11 If语句

在页面中，我们使用 v-if="条件语句" 来判断是否需要渲染该代码块，如果条件语句为true则显示，如果条件语句为false则隐藏显示

<block v-if="true" >

  <view> view1 </view>

  <view> view2 </view>

</block>

注意：我们if条件语句后面的true，里面的true或者false不能添加单引号或者双引号；如果添加了单引号或者双引号，里面的内容变成字符串都会被解析成true。

       我们下来看一个实例，完整代码如下

<template>

     <view>

             <view v-if="shuzi>2">

               if条件为真

             </view>

             <view v-if="shuzi>10">

               if条件为false，则不显示

             </view>

             <view v-if="jieguo">

               显示{{jieguo}}

             </view>

             <view v-if="shuzi>5">

             数字大于5

             </view>

             <view v-else-if="shuzi==5">

             数字等于5

             </view>

             <view v-else>

             数字小于5

             </view>

     </view>

</template>

<script>

     export default {

             data() {

                      return {

                               shuzi:5,

                               jieguo:true

                      }

             },

             methods: {

             }

     }

</script>

<style>

view{padding: 5px;}

</style>

运行效果如图：

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977

（4）毕业设计网

http://www.pc-365.net

（5）小程序编程网

http://www.4317.org

（6）计算机编程网

http://www.05423.com