技術標籤：Vue學習記錄javascriptcssvue.jshtmlhtml5

vue學習記錄-06 條件判斷

這篇文章是根據codewhy老師在b站的視訊進行的學習記錄

文章目錄

• vue學習記錄-06 條件判斷
• 一、v-if的使用
• 二、v-if和v-else的結合使用
• 三、v-if和v-else-if和v-else的使用
• 四、使用者登入切換的案例
• 五、v-show的使用

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