目錄

1.類與樣式的綁定

1.1綁定 HTML class

1.2綁定數組

1.3綁定內聯(lián)樣式

綁定數組

2.列表渲染

2.1v-for?

2.2v-for?與對象

2.3在?v-for?里使用范圍值?

---

1.類與樣式的綁定

1.1綁定 HTML class

我們可以給?:class?(v-bind:class?的縮寫) 傳遞一個對象來動態(tài)切換 class：

<div :class="{ active: isActive }"></div>

上面的語法表示?active?是否存在取決于數據屬性?isActive?的真假值。

class可以賦不同名字

第一種方式內斂的方式

const isActive = ref(true)
const hasError = ref(false)<divclass="static":class="{ active: isActive, 'text-danger': hasError }"
></div>
渲染的結果 也就是html顯示的
<div class="static active"></div>

當?isActive?或者?hasError?改變時，class 列表會隨之更新。舉例來說，如果?hasError?變?yōu)?true，class 列表也會變成?"static active text-danger"。

第二種方式綁定的方式

const classObject = reactive({active: true,'text-danger': false
})<div :class="classObject"></div>這也會渲染出相同的結果。我們也可以綁定一個返回對象的計算屬性。這是一個常見且很有用的技巧：const isActive = ref(true)
const error = ref(null)const classObject = computed(() => ({active: isActive.value && !error.value,'text-danger': error.value && error.value.type === 'fatal'
}))<div :class="classObject"></div>

1.2綁定數組

我們可以給?:class?綁定一個數組來渲染多個 CSS class：

const activeClass = ref('active')
const errorClass = ref('text-danger')
<div :class="[activeClass, errorClass]"></div>渲染的結果是：
<div class="active text-danger"></div>

如果你也想在數組中有條件地渲染某個 class，你可以使用三元表達式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

errorClass?會一直存在，但?activeClass?只會在?isActive?為真時才存在。

1.3綁定內聯(lián)樣式

:style?支持綁定 JavaScript 對象值，對應的是?HTML 元素的?style?屬性：

const activeColor = ref('red')
const fontSize = ref(30)<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

直接綁定

const styleObject = reactive({color: 'red',fontSize: '13px'
})<div :style="styleObject"></div>

綁定數組

<div :style="[baseStyles, overridingStyles]"></div>

2.列表渲染

2.1v-for?

我們可以使用?v-for?指令基于一個數組來渲染一個列表。v-for?指令的值需要使用?item in items?形式的特殊語法，其中?items?是源數據的數組，而?item?是迭代項的別名

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])<li v-for="item in items">{{ item.message }}
</li>在 v-for 塊中可以完整地訪問父作用域內的屬性和變量。v-for 也支持使用可選的第二個參數表示當前項的位置索引。
const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])<li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

2.2v-for?與對象

可以通過提供第二個參數表示屬性名 (例如 key)：

index第三個參數表示位置索引：

<script setup>
import { reactive } from 'vue'const myObject = reactive({title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'
})
</script><template><ul><li v-for="(value, key, index) in myObject">{{ index }}. {{ key }}: {{ value }}</li></ul>
</template>0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10

2.3在?v-for?里使用范圍值?

v-for?可以直接接受一個整數值。在這種用例中，會將該模板基于?1...n?的取值范圍重復多次。

template

<span v-for="n in 10">{{ n }}</span>

注意此處?n?的初值是從?1?開始而非?0。