Vue學習計划基礎筆記(三)-class與style綁定,條件渲染和列表渲染

Class與style綁定、條件渲染和列表渲染

目標：

1. 熟練使用class與style綁定的多種方式
2. 熟悉v-if與v-for的用法，以及v-if和v-for一起使用的注意事項

class與style綁定的多種方式

1. 綁定class和style都是使用v-bind也就是:
2. 無論是綁定class還是style,都有兩種方式,一種是對象,一種是數組.
3. class和:class是共存的

綁定示例

1.class對象綁定

    <!-- 根據isActivity的真假,判斷是否應用activity這個class -->
    <div :class="{activity:isActivity}"></div>   

2.class數組綁定

    <!-- 應用數組里面的class -->
    <div :class="[activity, activityOne]"></div>  

3.style對象綁定

    <!-- 應用這個樣式對象的樣式 -->
    <div :style="styleObj"></div>  
    
    <script>
    ...
	//styleObj寫在data里面
	data() {
	    return {
            styleObj: {
                color: 'black'
            }
	    }
    }
    ...
    </script>

4.style數組綁定

    <!-- 應用這個數組里面的樣式 -->
    <div :style="[styleObj,{fontSize:'25px'}]"></div>  

v-if與v-for的用法

條件渲染

1.v-if="表達式", 表達式的真假值決定了是否掛載到頁面上

     <div v-if="isTrue">這一段會在html里面,而且會顯示出來</div>
     <div v-if="isFalse">這段不會在html里面,也不會顯示出來</div>

2.v-show="表達式", 表達式的真假值決定了該節點的display屬性是none / block

     <div v-show="isTrue">display: block,會顯示出來</div>
     <div v-show="isFalse">display: none,不會顯示出來</div>

3.區別: 功能都是一樣,實現節點是否顯示出來,但是v-if會操作dom,會重新渲染頁面

4.v-if的話,還有v-if-else和v-else這兩個命令, 不過要連着一起用,中間不能有其他東西隔開,使用規則和js的if..else語句一樣

列表渲染

1.v-for of

     <li v-for="item of list">{{item}}</li>   //其中list為數組,item為數組元素
     <li v-for="(item,index) of list">{{index}}{{item}}</li>  //其中list為數組,index為索引(第一個0開始),item為數組元素

2.循環渲染對象

     //其中userInfo為對象, item為值, key為鍵, index為索引
     <li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>

3.一般會加個key值,避免互相影響(語法檢測會檢測這個,添加key值之后就會互相區分獨立,相同部分也會重新渲染,不會復用)

     <li v-for="(item, index) of list" :key="index"></li>
   或<li v-for="(item, index) of list" :key="item.id"></li>

4.key和index是可選的

v-if和v-for一起使用的注意事項

1.v-for的優先級比v-if更高, 如果它們處於同一個節點,這樣v-if將分別重復運行於每個v-for循環中.
也就是, 先執行v-for,v-for出來的每一項都會執行一次v-if.

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

2.如果想先執行v-if再判斷是否執行v-for, 可以將v-if置於外層元素(或template)上.

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>