Vue学习总结（九）——条件判断v-if、v-else-if、v-else、v-show指令

最新推荐文章于 2024-03-11 11:12:35 发布

VIP文章田小江爱分享

最新推荐文章于 2024-03-11 11:12:35 发布

阅读量2.2k

点赞数 1

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/third_/article/details/111083797

版权

1、v-if、v-else-if、v-else指令

这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

（1）v-if的原理：

v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div v-if="isShowMessage" id="app">
    <h2>{
  {message}}</h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好呀',
        isShowMessage: true
      }
    })
  </script>
</body>
</html>

执行结果如下：

当我们在控制台把 isShowMessage 设置为false的时候，页面显示效果如下：

（2）v-if和v-else联合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2 v-if="isShowMessage" >{