Vue.js 是一款基于 JavaScript 的MVVM 框架，具有雙向數(shù)據(jù)綁定和組件化的優(yōu)點，廣泛應(yīng)用于前端開發(fā)中。在 Vue 中，除了 JavaScript 代碼外，還可以使用 CSS 來實現(xiàn)視覺效果。本文將介紹一些常見的 Vue CSS 特效。

1、過渡效果

//HTML
<div v-show="show">內(nèi)容</div>
// CSS
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}

2、動態(tài)樣式

//HTML
<div :class="{ active: isActive }"></div>
//CSS
.active {
font-weight: bold;
font-size: 18px;
}

3、條件渲染

//HTML
<div v-if="seen">要顯示的內(nèi)容</div>
//CSS
.hidden {
display: none;
}

4、列表渲染

//HTML
<div v-for="item in items">{{ item }}</div>
//CSS
.list-item {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}

5、自定義組件樣式

//HTML
<my-component></my-component>
//CSS
.my-component {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ccc;
}

這些 Vue CSS 特效只是冰山一角，Vue 還有更多強(qiáng)大的功能和特性等待你去探索。