首页 前端知识 Vue - v-if和v-else-if和v-else的使用

Vue - v-if和v-else-if和v-else的使用

2024-05-12 00:05:28 前端知识 前端哥 628 38 我要收藏

一、简单的演示

<body>
  <div id="app">
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=60">及格</p>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        score: 90,
      }
    })
  </script>
</body>

二、v-if的使用

通过 v-if 里面表达式的结果, 如果为true , 则显示当前行, 反之不显示

<body>
  <div id="app">
    <!-- 当变量score大于等于90的时候, 当前行显示, 当小于90的时候, 当前行不显示 -->
    <p v-if="score>=90">优秀</p>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        score: 90,
      }
    })
  </script>
</body>

三、v-if和v-else的使用

当v-if后面表达式的值为true的时候显示v-if所在的元素
当v-if后面表达式的值为false的时候显示v-else所在的元素

<body>
  <div id="app">
    <!-- 当变量score大于等于90的时候, 当前行显示, 当小于90的时候, 当前行不显示 -->
    <!-- 当条件满足时显示当前行 -->
    <p v-if="score>=90">优秀</p>
    <!-- 当条件不满足时显示当前行 -->
    <p v-else>其他</p>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        score: 80,
      }
    })
  </script>
</body>

三、v-if和v-else-if的使用

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

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        score: 50,
      }
    })
  </script>
</body>
 

 

 v-if和v-show区别

        1.相同的:都可以进行显示隐藏

        2.不同点:v-if存在或不存在,v-show展示或不展示

        3.优缺点:少次的显示隐藏推荐使用v-if,减少内存的消耗

        多次的显示隐藏推荐使用v-show

        

         v-if和v-for优先级和使用事项

        在vue2中v-for比v-if优先级高

        在vue3中v-if比v-for优先级高

        v-if和v-for在vue2或vue3中都不要同时使用,

        如果需要使用在外层先使用判断,在进行循环 

一些区别

  v-else,v-cloak,v-once,v-pre不需要带值 

       v-bind:或:,v-on:或@,v-for,v-if,v-show,v-model

        v-else,v-else-if,v-text,v-html,v-cloak,v-once,v-pre, 

        v-text和v-html,插值 区别 

        1.相同点:v-text和v-html都会覆盖原本内容

        不同点:v-text文本,v-html标签

        插值会进行拼接

        注:一定不要在用户提交时使用v-html-->

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8255.html
标签
评论
发布的文章

JSON三种数据解析方法

2024-05-22 09:05:13

使用nvm管理(切换)node版本

2024-05-22 09:05:48

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!