专栏首页人生代码Vue 3 条件渲染

Vue 3 条件渲染

条件渲染

实验介绍

可以使用条件判断的方式来分别渲染。

v-if

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

<template>
  <div class="template-m-wrap">
    <div class="static active" v-if="isActive">默认样式</div>
    <div class="static" v-else></div>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {
    return {
      isActive: true, // active 样式
    };
  },
};
</script>

<style  scoped>
.active {
  color: aqua;
}
.danger {
  color: red;
}
</style>

查看浏览器效果如下:

<template> 元素上使用 v-if 条件渲染分组

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

<template>
  <div class="template-m-wrap">
    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {
    return {
      ok: true, // active 样式
    };
  },
};
</script>

<style  scoped>
.active {
  color: aqua;
}
.danger {
  color: red;
}
</style>

查看浏览器效果如下:

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”:

<template>
  <div class="template-m-wrap">
    <div v-if="Math.random() > 0.5">Now you see me</div>
    <div v-else>Now you don't</div>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {
    return {
      ok: true, // active 样式
    };
  },
};
</script>

<style  scoped>
.active {
  color: aqua;
}
.danger {
  color: red;
}
</style>

查看浏览器效果如下:

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

v-else-if

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

<template>
  <div class="template-m-wrap">
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {
    return {
      type: true, // active 样式
    };
  },
};
</script>

<style  scoped>
.active {
  color: aqua;
}
.danger {
  color: red;
}
</style>

查看浏览效果如下:

类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:

<template>
  <div class="template-m-wrap">
    <h1 v-show="ok">Hello!</h1>
    <h1 v-show="!ok"> not Ok</h1>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {
    return {
      ok: true, // 渲染
    };
  },
};
</script>

<style  scoped>
.active {
  color: aqua;
}
.danger {
  color: red;
}
</style>

查看浏览效果如下:

我们可以得出结论,v-if 如果给定的值不为 true,DOM 元素不会渲染出来,而 v-show 给定的值如果不为true,实际上是在样式上加了 display: none 影藏了而已,实际上是渲染出来的,具有实际上的 DOM 元素。

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

注意,v-show 不支持 <template> 元素,也不支持 v-else

v-ifv-show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

本文分享自微信公众号 - 志学Python(lijinwen1996329ken),作者:志学Python

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-10-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Vue 3构建更好的高阶组件

    高阶组件(HOC)是使用模板声明性地向您的应用程序添加某些功能的组件。我相信即使引入了Composition API,它们仍将保持非常重要的关联。

    公众号---人生代码
  • (长文预警) 你还在烦工作中碰到的拖拽问题?一个框架jiejue

    Sortable —是一个JavaScript库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。支持Meteor,AngularJS,R...

    公众号---人生代码
  • Vue 3 模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层应用实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被...

    公众号---人生代码
  • 萌新学习C++容易漏掉的知识点看看你中招了没有(二)

           很多人,包括我,看书,看完一章怎么怎么的,然后不管是作业,还是考试出现这一章的内容,总有些地方跟我们脑袋里面理解的不一样,自己明明学习过,但机器给...

    花狗Fdog
  • Roman to Integer

    问题:罗马数字变为整数 class Solution { public: int romanToInt(string s) { cha...

    用户1624346
  • mybatis的小问题记录

    Dream城堡
  • 读 《C Traps and Pitfalls》Record

    单引号实际代表一个整数 双引号代表指向无名数组的起始字符的指针(字符结尾 0) 使用库函数计算得到的字符串长度不包括结尾的0!

    orientlu
  • 【AI版狄仁杰】爱丁堡大学团队教AI识别犯罪剧中的罪犯,正确率达60%仍不及人类

    作者:常佩琦 【新智元导读】爱丁堡大学的研究人员通过《犯罪现场调查》系列电视剧的相关视频、音频和文本训练AI,测试AI能否准确识别每集中的罪犯。在每集电视剧结束...

    新智元
  • 翻转数列python实现,求前n项和,并能输出整个数列的案例

    给定整数n和m, 满足n能被2m整除。对于一串连续递增整数数列1, 2, 3, 4…, 每隔m个符号翻转一次, 最初符号为’-‘;。

    砸漏
  • tar打包原理分析

    首先是进入main 获得program_name //这个是执行程序的文件名 然后设置环境变量,初始化退出的状态,代码如下:

    用户3765803

扫码关注云+社区

领取腾讯云代金券