這篇文章跟大家分享了關於Vue中class與style綁定以及條件與清單渲染的分析，有需要的朋友可以參考一下
目標：
#熟練使用class與style綁定的多種方式
熟悉v-if與v-for的用法，以及v-if和v-for一起使用的注意事項
#綁定class和style都是使用v-bind也就是:
無論是綁定class還是style,都有兩種方式,一種是物件,一種是陣列.
class和:class是共存的
1.class物件綁定
<!-- 根据isActivity的真假,判断是否应用activity这个class -->
<p :class="{activity:isActivity}"></p>2.class陣列綁定
<!-- 应用数组里面的class -->
<p :class="[activity, activityOne]"></p>3 .style物件綁定
<!-- 应用这个样式对象的样式 -->
<p :style="styleObj"></p>
<script>
...
//styleObj写在data里面
data() {
return {
styleObj: {
color: 'black'
}
}
}
...
</script>4.style陣列綁定
<!-- 应用这个数组里面的样式 -->
<p :style="[styleObj,{fontSize:'25px'}]"></p>1. v-if="表達式", 表達式的真假值決定了是否掛載到頁面上
<p v-if="isTrue">这一段会在html里面,而且会显示出来</p>
<p v-if="isFalse">这段不会在html里面,也不会显示出来</p>2.v-show="表達式", 表達式的真假值決定了該節點的display屬性是none / block
<p v-show="isTrue">display: block,会显示出来</p>
<p v-show="isFalse">display: none,不会显示出来</p>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是可選的
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>相關推薦：
#以上是Vue中class與style綁定以及條件與清單渲染的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
