Vue条件渲染的简单示例。

最新推荐文章于 2024-07-04 10:01:18 发布

LuckXinXin

最新推荐文章于 2024-07-04 10:01:18 发布

阅读量127

点赞数

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

本文链接：https://blog.csdn.net/LuckXinXin/article/details/104705512

版权

Vue 专栏收录该内容

165 篇文章 10 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>条件渲染</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
  <p v-if="ok">点赞成功</p>
  <p v-else>点赞失败</p>

  <p v-show="ok">关注成功</p>
  <p v-show="!ok">关注失败</p>
<hr >
  <button @click="ok=!ok">点击切换效果</button>
</div>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      ok: true
    }
  })
  <!-- 如果需要频繁切换 v-show 较好 -->
</script>
</body>
</html>