3.vue语法-条件判断 if show

基础数据展示

<template>
  <view>
    <view class="">当前标题：{{title}}</view>
    <view class="">{{num}}</view>
    <view class="">{{arr[1]}}</view>
    <view class="">{{arr[2]}}</view>
    <view class="">{{obj.name}}</view>
    <view class="">{{obj.age}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: "uniapp学习",
        num: 123,
        arr: ["aaa", "bbb", 123],
        obj:{name: "张三",age:20}
      };
    }
  }
</script>

<style lang="scss">

</style>

v-if 条件判断

判断语句 if else 之间不能加其他无关语法，否则报错

条件成立的标签执行，条件不成立不执行

<template>
  <view>
    <view v-if="day==1">周一</view>
    <view v-else-if="day==2">周二</view>
    <view v-else-if="day==3">周三</view>
    <view v-else-if="day==4">周四</view>
    <view v-else-if="day==5">周五</view>
    <view v-else-if="day==6">周六</view>
    <view v-else>周日</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        day:3
      };
    }
  }
</script>

<style lang="scss">

</style>

v-show 和 v-if 的区别

<template>
  <view>
    <view v-if="state">uniapp</view>
    <view v-else>css</view>
    
    ---
    <view v-show="state">uniapp</view>
    <view v-show="!state">css</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        state: true
      };
    }
  }
</script>

<style lang="scss">

</style>

v-if隐藏的标签是不显示的，v-show只是隐藏，但是还在，v-show是用css的行内样式把它隐藏了，v-if的隐藏是一次性的，v-show的隐藏是可以重复隐藏、显示的