vue学习笔记 条件判断

vue学习笔记 条件判断

1：v-if、v-else-if、v-else
基本用法：

// condition的类型为Boolean值
  <h2 v-if="condition1">情况1</h2>
  <h2 v-else-if="condition2">情况2</h2>
  <h2 v-else->情况3</h2>

注： v-if、v-else-if、v-else多用在比较简单的逻辑判断上，比如说根据session来判断是不是要显示一些登录信息等等。如果需要更加复杂的逻辑判断，建议使用computed属性。优点是：代码逻辑更加清晰、可阅读性更强。
例子（判断成绩）：

v-if版本（不推荐）：

// v-if版本：
  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>

计算属性版本（推荐使用）：

//计算属性版本：
<h1>{{result}}</h1>
//js中：
computed: {
      result() {
        let scoreInfo = "";
        if (this.score >= 90){
          scoreInfo = "优秀";
        }else if(this.score >= 80){
          scoreInfo = "良好";
        }else if(this.score >= 60){
          scoreInfo = "及格";
        }else{
          scoreInfo = "不及格";
        }
        return scoreInfo;
      }
    }

2、v-show以及和v-if的区别和选择
简介：
v-show与v-if的用法相似，同样决定一个元素是否进行渲染。当判断条件为true时，两者基本没有区别。
区别：
当v-if的条件为false时，不会有对应标签出现在DOM中
当v-show的条件为false时，有标签出现在DOM中，但是元素的display属性设置成了none。
选择：
开发时，需要在显示与不显示之间进行多次切换时，使用v-show；
如果只需要进行一次判断决定显示哪一个时，使用v-if。
例子：比如在判断登录状态时，就使用v-if；在切换登录/支付方式时，就使用v-show。