六、Vue條件判斷

不會Java怎麼找女朋友發表於2021-01-05

Vue

01-v-if,v-else-if,v-else的使用

1.1 v-if,v-else-if,v-else

1、v-if,v-else-if,v-else

這三個指令與JavaScript的條件語句if,else,else if類似
Vue的條件指令可以根據表示式的值在DOM中渲染或銷燬元素或元件

2、v-if原理

v-if後面的條件為false時，對應的元素以及其子元素不會渲染
也就是根本沒有不會有對應的標籤出現在DOM中

1.2 程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-if,v-else-if,v-else的使用</title>
</head>
<body>

<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>
  <hr>
  <h2>{{result}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      score: 97
    },
    computed: {
      result(){
        let result = '';
        if(this.score >= 90){
          result = '優秀';
        }else if(this.score >= 80){
          result = '良好';
        }else if(this.score >= 60){
          result = '及格';
        }else{
          result = '不及格';
        }
        return result;
      }
    }
  })
</script>
</body>
</html>

1.3 執行結果

在這裡插入圖片描述

02-切換登入方式的案例

2.1 案例需求

使用者在登入時，可以切換使用者賬號登入還是郵箱賬號登入

2.2 實戰程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-切換登入方式的案例</title>
</head>
<body>

<div id="app">
   <span v-if="isUser">
     <!--for="username" 這個屬性可以讓滑鼠點選文字的時候游標在id="username"的輸入框裡-->
    <label for="username">使用者賬號</label>
    <input type="text" id="username" placeholder="使用者賬號">
  </span>
  <span v-else>
    <label for="email">使用者郵箱</label>
    <input type="text" id="email" placeholder="使用者郵箱">
  </span>
  <button @click="isUserClick()">切換登入方式</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      isUser:true
    },
    methods: {
      isUserClick(){
        this.isUser = !this.isUser;
      }
    }
  })
</script>
</body>
</html>

2.3 案例小問題

1、小問題：

如果我們在有輸入內容的情況下，切換了型別，我們會發現文字一仍然顯示之前的輸入的內容
但是按道理講，我們應該切換到另一個input的元素中
在另一個input元素中，我們並沒有輸入內容
為什麼會出現這個問題呢？

2、問題解答：

這是因為Vue在進行DOM渲染時，出於效能考慮，會盡可能的複用已經存在的元素，而不是重新建立新的元素
在案例中，Vue內部會發現原來的input元素不再使用，直接作為else中input來使用

3、解決方案：

如果我們不考慮Vue出現類似重複利用的問題，可以給對應的input新增key
並且保證key不相同

<div id="app">
  <span v-if="isUser">
    <label for="username">使用者賬號</label>
    <input type="text" id="username" placeholder="使用者賬號" key="username">
  </span>
  <span v-else>
    <label for="email">使用者郵箱</label>
    <input type="text" id="email" placeholder="使用者郵箱" key="email">
  </span>
  <button @click="isUserClick()">切換登入方式</button>
</div>

03-v-show的使用

3.1 v-show

1、v-show的用法和v-if非常相似，也用於決定一個元素是否渲染
2、v-if和v-show都可以決定一個元素是否渲染，那麼開發中我們如何選擇呢？

v-if當條件為false時，壓根不會有對應的元素在DOM中
v-show當條件為false，僅僅是將元素的display屬性設定為none而已

3、開發種如何選擇呢？

當需要在顯示與隱藏之間切片很頻繁時，使用v-show
當只有一次切換時，通過使用v-if

3.2 程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-show的使用</title>
</head>
<body>

<div id="app">
  <!--  v-if :當條件為false時，包含v-if指令的元素。根本就不會存在dom中-->
  <h2 v-if="isShow">{{message}}</h2>
  <!--  v-show: 當條件為false時，v-show只是給我們的元素新增一個行內樣式：display:none-->
  <h2 v-show="isShow">{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      isShow:true,
    }
  })
</script>
</body>
</html>