vue学习记录-06 条件判断

vue学习记录-06 条件判断

这篇文章是根据codewhy老师在b站的视频进行的学习记录

---

---

一、v-if的使用

if条件判断在每种语言中都是非常常用的，VUE中提供了v-if让开发者能够根据一定的条件对于元素内容进行渲染。
这里我们使用一个值为布尔的数据isShow作为v-if的值。

  <div id='app'>
    <h2 v-if="isShow">
      <div>{{message}}</div>
    </h2>
  </div>

    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello,Vue!',
        isShow:true
      },
    })

二、v-if和v-else的结合使用

有if自然也会有else，v-else就是被用来给哪些不符合给定的条件的元素进行渲染的指令。

  <div id='app'>
    <h2 v-if="isShow">
      <div>{{message}}</div>
    </h2>
    <h1 v-else>isShow为false时，显示我</h1>
  </div>

    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello,Vue!',
        isShow:true
      },
    })

v-else不需要值
v-else必须跟在v-if后面

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

类似于elseif，v-else-if可以对不符合条件的结果再一次判断。

<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>

const app = new Vue({
  el: '#app',
  data: {
    score:99
  }
})

不过，对于这些复杂逻辑，一般还是会更推荐使用计算属性computed，HTML代码里面不适合写过多的逻辑。

<h2>{{result}}</h2>

computed:{
        result(){
          let showMessage='';
          if(this.score>=90){
            showMessage='优秀'
          }else if(this.score>=80){
            showMessage='良好'
          }else if(this.score>=60){
            showMessage='及格'
          }else{
            showMessage='不及格'
          }
          return showMessage
        }
      }

四、用户登录切换的案例

在编写登陆界面时，经常会遇到需要切换登录方式的要求，下面我们来看看一般会怎么实现。

  <div id='app'>
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id=username placeholder="用户账户">
    </span>
    <span v-else>
      <label for="useremail">用户邮箱</label>
      <input type="text" id=useremail placeholder="用户邮箱">
    </span>
    <button @click="isUser=!isUser">切换类型</button>
  </div>

一个小细节：如果label标签的for属性绑定了input输入框id，那么用户点击label就可以直接聚焦对应的input输入框

    const app = new Vue({
      el: '#app',
      data: {
        isUser: true
      }
    })

效果：

点击切换类型：

注意：如果此时输入框内有文字，那么切换类型之后，新的输入框内也是会有一样的内容的。


切换后文字内容没有被清空

这是因为vue在进行dom渲染时，出于性能考虑会尽可能的复用已存在的元素，如果不希望元素被复用，那么给input输入框加上不同的key就可以解决这个问题了。

<input type="text" id=username placeholder="用户账户" key="username">
<input type="text" id=useremail placeholder="用户邮箱" key="useremail">

五、v-show的使用

除了v-if，VUE还给我们提供了另一个指令v-show用于控制元素的渲染。

<h2 v-show="isShow" id="b">{{message}}</h2>

      data: {
        message: 'Hello,Vue!',
        isShow:true
      }

那么，v-if和v-show作用这么相似，他们之前有什么不同呢？
1、如果使用v-if控制渲染，那么当条件为false时，包含了v-if指令的元素，根本就不会存在dom中
2、如果使用v-show控制渲染时，那么当条件为false时，v-show只是给我们的元素添加一个行内样式：display:none
因此，出于性能考虑，我们通常会这么选择使用：
1、当需要在显示与隐藏之间切换频繁时，使用v-show
2、当只有一次切换时，使用v-if