Vuejs 条件判断

最新推荐文章于 2022-12-06 12:09:43 发布

苦涩2020

最新推荐文章于 2022-12-06 12:09:43 发布

阅读量383

点赞数

分类专栏： Vuejs 前端文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/108309999

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

Vuejs

8 篇文章

订阅专栏

本文详细介绍了Vue.js中的条件渲染语法，包括v-if的使用，v-if与v-else结合的场景，以及v-if、v-else-if和v-else的综合应用，帮助开发者理解如何在Vue组件中实现动态条件展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-if 使用

<div id='app'>
  <h2 v-if="true">
    {{message}}
    <div>aaa</div>
    <div>bbb</div>
  </h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isShow: true
    }
  })
</script>

v-if 与 v-else 使用

<div id='app'>
  <h2 v-if="isShow">
    {{message}}
  </h2>
  <h1 v-else>isShow为false时，显示我</h1>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isShow: true
    }
  })
</script>

v-if 与 v-else-if 与 v-else 使用

<div id='app'>
  <p v-if="score>=90">优秀</p>
  <p v-else-if= "score>=80">良好</p>
  <p v-else-if= "score>=60">及格</p>
  <p v-else>不及格</p>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      score : 90,
    }
  })
</script>