v-if、v-else-if和v-else与计算属性computed对比

对于条件判断指令不够深入,特此与计算属性computed做个简单对比,加深一下对于这个的理解。如果有小伙伴想要深入了解Vue.js框架的条件渲染可以去官方文档看一下哦。
官网文档:条件渲染-Vue.js
https://cn.vuejs.org/v2/guide/conditional.html
话不多说上代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .div{
      border: 1px solid #fffe2d;
      width: 400px;/*宽*/
      margin: 200px auto;/*margin-left 与 margin-right设置为auto*/
      background: antiquewhite;
    }
    .div h1, .div h2 {
      text-align:center;/*h1,h2标签文字居中*/
    }
    .div div {
      width:250px;/*div标签里span和input居中*/
      margin: 0 auto;
    }
  </style>
</head>
<body>
<div id="app" class="div">
  <h1 style="color: chocolate">成绩评估器</h1>
  <h2 style="color: #4255ff">对0-100分的同学成绩进行评估</h2>
  <div>
    <span>请入分数</span>
    <input v-model="score"></input>
  </div>
  <h2 v-text="result">该同学成绩结果:{{result}}</h2>
  <!--判断的红色字体-->
  <span style="color: red">
    <h2 v-if="score >= 90 && score <= 100">优秀</h2>
    <h2 v-else-if="score >= 80 && score < 90">良好</h2>
    <h2 v-else-if="score >= 60 && score < 80">及格</h2>
    <h2 v-else-if="score < 0">输入不合法</h2>
    <h2 v-else-if="score >100">输入不合法</h2>
    <h2 v-else>继续努力!</h2>
  </span>
</div>
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: '你好!',
      score: null
    },
    computed: {
      result() {
        let showMessage = '';
        if (this.score >= 90 && this.score <= 100) {
          showMessage = '优秀'
        }else if (this.score >= 80&& this.score < 90) {
          showMessage = '良好'
        }else if (this.score >= 60&& this.score < 80) {
          showMessage = '及格'
        }else if (this.score < 0 || this.score > 100){
          showMessage = '输入不合法'
        }else {
          showMessage = '继续努力!'
        }
        return showMessage
      },
    }
  })
</script>
</body>
</html>

效果图:
在这里插入图片描述
因为是需要做一个比较,所以做了一下简陋的页面布局,保证能够更清晰地看到比较的结果。
就整体思路来看,相对与指令来说,函数的表达要更能接受一些,通过定义函数,来进行条件循环,是我在没有学习条件渲染之前经常会用到的。
而当我在学习到条件渲染之后,通过开发者工具输入:app.score=某个数 来实现条件渲染
如图所示:在这里插入图片描述
每次通过开发者工具显然不是给用户使用,而之前通过input标签和计算属性的结合能够进行条件判断,发散一下就能发现input和v-if也可以结合使用来进行条件渲染。并且给人的第一感觉效果是相同的。不过条件渲染相对来说看起来较为繁琐和冗余。
综上,我做了以下比较就代码块来看,逻辑越繁琐,需要的条件判断越多,我们通过计算属性来做最后直接输出一个result结果即可,所有的判断我们在属性内部来做,保证代码清晰度。而当条件判断较为简单时,通过v-if等条件渲染指令可以保证高效且快速。
而在我写这个生成器的时候遇到过一些小问题,在最后和小伙伴们分享一下,在进行条件判断的时候一定一定不要有交集,否则当通过判断条件行时,下一行的条件就不在进行判断!谨记!
今日份挖坑,等后面学习v-show等再来填坑吧。

Logo

前往低代码交流专区

更多推荐