易语言资源网 - 做最全的易语言资源下载社区
<易语言软件开发工程师>第12期(预报名) 精易论坛授权登录

【零基础学会uniapp】第三课:条件渲染   [复制链接]

    2021-10-19 10:13:10
    uni-app
    易语言资源网
    138 次浏览

3、 条件渲染

v-if和v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 值的时候被渲染

v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用

v-else 指令来表示 v-if 的“else 块”

在 JavaScript 中,(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。

<template>
       <view>
           <view v-if="seen">现在你看到我了</view>
           <view v-else>你看不到我了</view>
           <button @click="onclicked">点击切换</button>
       </view>
</template>
<script>
   export default {
       data() {
           return {
               seen: true
          }
      },
       methods: {
           onclicked() {
               this.seen = !this.seen;
          }
      }
  }
</script>
条件渲染分组

因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 template 元素当做不可见的包裹元素,并在上面使用 v-if。

<template v-if="seen">
   <view>标题</view>
   <view>内容:现在你看到我了</view>
</template>
v-show

这块内容只会在指令的表达式返回 值的时候被显示。

<view v-show="true">Hello!</view>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性的 display(可视) 。注意,v-show 不支持 template 元素,也不支持 v-else。nvue 页面不支持 v-show。

本课引用链接

https://uniapp.dcloud.io/vue-basics?id=condition

@ 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群:326576256





点我下载 (已有 6 次下载)

[错误报告]   上一篇:获取wai网IP     下一篇:龙爵个人财务收支工具软件源码分享...