什么是条件判断

是指某一个元素，或者说某一块元素，是否要渲染。

我们可以来看一个例子，看看uni-app当中条件判断跟其他平台的条件判断是否一样。

uni-app当中要做条件判断用到一个指令v-if，这个指令用于条件形式来渲染一块内容，这块内容会再指令表达式返回true的时候才显示出来。

 

接下来我们看看例子吧

下面的代码使用了v-if指令来显示一个hello uni-app数据，只有当v-if返回true才显示这个数据。

<view v-if="true">hello uni-app</view>

这样数据就显示出来了，大家可以看看下面图片，这样我们的这个元素就显示出来了。

接下来我们把true修改成false,看看效果，

当我们修改成false过后就不显示了，所以我们得到的结论就是。

当v-if返回值为true的时候，元素才渲染出来，当为false的时候就不渲染数据。

 

给v-if动态设置

接下来我们可以把v-if里面的值用个变量来表示，比如叫：show变量，

<view v-if="show">hello uni-app</view>

然后在script标签里面的return里面添加一个变量叫show,然后在运行程序，看到的结果还是跟之前一样的，这就说明我们已经成功动态的设置了v-if里面的值了。

<script>
    export default {
        data(){
            return{
                show:true
            }
        },
    }
</script>

给v-if设置字符串可以吗

接下来们可以看看，之前我们使用的都是true,false变量值，接下来我们可以设置成别的值，比如字符串可以吗，代码如下:

结果是没有显示的，因为技术刚刚好，是不等于技术刚刚这个字符串的。

<template>
    <view class="content">
        
        <view v-if="show ==  '技术刚刚'">hello uni-app</view>
        
        
        
        
    </view>
</template>
?
<script>
    export default {
        data(){
            return{
                show:"技术刚刚好"
            }
        },
    }
</script>
?
<style>
    
</style>
?

结论 ：v-if如果表达式返回值为真，那么我们就会正常的渲染内容。

增加一个按钮

增加一个按钮，接下来当我们点击这个按钮的时候就动态的修改shou这个变量值。当点击按钮的时候，我们就修改shou变量的值。

<button @click="click">点击我</button>
我们要动态的修改shou里面的值。
<script>
    export default {
        data(){
            return{
                show:true
            }
        },
        methods:{
            click(){
                this.show=false
            }
        }
    }
</script>
当我们点击这个按钮后，就会隐藏布局。

今天就讲到这里吧，很简单的一个语法，条件判断而且这个语法也是我们在开发当中用到比较多的一个方法，所以大家一定要学会哟。

大家也能看得出来，我的文章一开始都很基础，因为我想从头给大家写一系列的教程，只要跟着我的教程走，等你学完也一定能够开发出一个Uni-app出来。