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

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

GG_Zdd

701人浏览 · 2021-01-14 16:18:20

GG_Zdd · 2021-01-14 16:18:20 发布

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等再来填坑吧。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^