vue条件渲染指令

最新推荐文章于 2024-07-19 10:04:44 发布

虽千万人吾往矣

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量250

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44575660/article/details/107584506

版权

vue 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

v-if,v-else,v-show
v-if和v-else，当v-if为真时，v-if创建，v-else移除，当v-if为假时，v-if移除，v-else创建
当v-show为真时，v-show显示,当v-show为假时，v-show隐藏

v-if、v-else和v-show区别

v-if、v-else是两个中一个创建、一个移除，而v-show的属性值为假时隐藏，为真时显示，区别就是v-show为假是存在但不显示，而v-if、v-else一个存在并显示，一个不存在。当进行频繁的切换操作时，选择v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>条件渲染</title>
</head>
<body>

<div id="demo">
  <p v-if="ok">表白成功</p>
  <p v-else>表白失败</p>

  <hr>
  <p v-show="ok">求婚成功</p>
  <p v-show="!ok">求婚失败</p>

  <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      ok: true
    }
  })
</script>
</body>
</html>