Vue中使用 class 類樣式的方法詳情
阿新 • • 發佈：2021-11-22
在中為我們提供了 幾種方式來使用class類的樣式
現在我們將true 改為 false：
我們也可以在資料中心 定義 一個 
也可以在自定義計算屬性，封裝在函式中，在返回呼叫
到此這篇關於Vue中使用 class 類樣式的方法詳情的文章就介紹到這了,更多相關Vue中使用 class 類樣式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！
1. 布林值
我們先正常在style 標籤中 書寫一個類名為 active的樣式
<style>
.active{
color: red;
font-size: 20px;
font-style: normal;
}
</style>
在我們的 script 標籤中建立一個 vm 例項，在例項的 data 資料中心寫上 isActive:true ，
true 表示使用此樣式，false 則表示不使用
<script src="/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',data:{
isActive:true
}
</script>v-bind指令 使用class類
<div id="app">
<h1 :class="{active:isActive}">我是使用布林值引用class樣式</h1>
</div>
檢視輸出結果:
現在我們將true 改為 false：
data:{
isActive: false
}
檢視輸出結果：
2.表示式
我們可以在 v-bind: 指令後新增表示式，當滿足該條件時，呼叫該class 類
舉例，我們在資料中心 data 中有一個物件陣列，把他渲染到檢視層上，我想讓 索引為 偶數的引用
class 類樣式：
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list">{
<!-- -->{index}}----{
<!-- -->{item.name}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",data:{
list:[
{id:1,name:"金克斯"},{id:2,name:"傑斯"},{i
在 li 中oOHeB使用屬性繫結class類樣式：
<li v-for="(item,index) in list" :class="{active: index%2 == 0}">
{
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>
輸出結果為：
我們也可以在資料中心 定義 一個 mark，通過定義 mark 的值來做到讓某一行 單獨引用 class類
<li v-for="(item,index) in list" :class="{active: index === mark}">
{
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>
let vm = new Vue({
el:"#app",{id:3,],mark:0
}
})
此時只有索引為 0 的 引用了樣式，即第一個：
3.多類封裝
多個類，可以直接封裝到物件中，在檢視層直接呼叫物件名即可！多個類，可以將其放置在物件中，在檢視層就是一個物件名稱，在資料中心
data中是一個物件，物件中羅列出多個類
<style>
.f50{
font-size: 50px;
}
.blue{
color: blue;
}
.background{
background-color: black;
}
</style>
<body>
<div id="app">
<p :class="classObject">中國人</p>
</div>
</body>
let vm = new Vue({
el:"#app",data:{
classObject:{
"f50":true,"blue":true,"background":true
}
}
})
輸出結果為：
也可以在自定義計算屬性，封裝在函式中，在返回呼叫
let vm = new Vue({
el:"#app",computed:{
// 1. 自定義的計算屬性名，
// 2.計算屬性做的事情，我們將其封裝到函式中
myclass(){
roOHeBeturn {
"f50":true,"background":true
}
}
}
})
<poOHeB :class="myclass">中國人</p>輸出結果一致
4.可以直接在 v-bind：中使用陣列形式使用class類
.f50{
font-size: 50px;
}
.blue{
www.cppcns.com color: blue;
}
.background{
background-color: black;
}
<!-- 注意，class 名要加引號 -->
<p :class="['f50','blue','background']">一週又一週</p>
輸出結果：
到此這篇關於Vue中使用 class 類樣式的方法詳情的文章就介紹到這了,更多相關Vue中使用 class 類樣式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！