P6-条件判断

举报
brucexiaogui 发表于 2021/11/26 00:57:51 2021/11/26
2.7k+ 0 0
【摘要】 P6-条件判断 1.v-if的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...

P6-条件判断

1.v-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!-- 判断当前变量值为true时,显示数据。 -->
  <h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isShow: true
    }
  })
</script>
</body>
</html>

  
 

v-if和v-else使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

 <div id="app">
    <!-- v-if后面的条件为true时,对应的元素以及其子元素会渲染。 -->
   <h2 v-if="isShow">
     {{message}}
   </h2>

   <!-- v-if后面的条件为false时,对应的元素以及其子元素不会渲染。 -->
   <h2 v-else="isShow">
    isShow为false时, 显示我
   </h2>
 </div> 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isShow: false
    }
  })
</script>
</body>
</html>

  
 

3.v-else-if使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!-- 需求:成绩大于等于90优秀,大于等于80良好,大于等于60及格,小于60不及格 -->
 <div id="app">
   <h2 v-if="score>=90">优秀</h2>
   <h2 v-else-if="score>=80">良好</h2>
   <h2 v-else-if="score>=60">及格</h2>
   <h2 v-else>不及格</h2>
 </div> 

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      score: 99
    }
  })
</script>
</body>
</html>

  
 

文章来源: brucelong.blog.csdn.net,作者:Bruce小鬼,版权归原作者所有,如需转载,请联系作者。

原文链接:brucelong.blog.csdn.net/article/details/110441982

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。