Vue中使用?class?類樣式的方法詳情
更新時(shí)間：2021年11月22日 09:22:06 作者：最愛喝怡寶
這篇文章主要介的是?Vue中如何使用?class?類樣式的方法，在vue中為我們提供了幾種方式來使用class類的樣式，分別是布爾值、表達(dá)式、多類封裝、下面來看看文章的詳細(xì)介紹內(nèi)容吧,需要的朋友可以參考一下
在vue中為我們提供了 幾種方式來使用class類的樣式
1. 布爾值
我們先正常在
style 標(biāo)簽中 書寫一個(gè)類名為 active的樣式
<style>
.active{
color: red;
font-size: 20px;
font-style: normal;
}
</style>
在我們的
script 標(biāo)簽中創(chuàng)建一個(gè) vm 實(shí)例，在實(shí)例的 data 數(shù)據(jù)中心寫上 isActive:true ，true 表示使用此樣式，false 則表示不使用
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
isActive:true
}
</script>
此時(shí)我們?cè)?標(biāo)簽中 已
v-bind指令 使用class類
<div id="app">
<h1 :class="{active:isActive}">我是使用布爾值引用class樣式</h1>
</div>
查看輸出結(jié)果:
現(xiàn)在我們將true 改為 false：
data:{
isActive: false
}
查看輸出結(jié)果：
2.表達(dá)式
我們可以在 v-bind: 指令后添加表達(dá)式，當(dāng)滿足該條件時(shí)，調(diào)用該
class 類舉例，我們?cè)跀?shù)據(jù)中心
data 中有一個(gè)對(duì)象數(shù)組，把他渲染到視圖層上，我想讓 索引為 偶數(shù)的引用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:"杰斯"},
{id:3,name:"凱特琳"},
{id:4,name:"蔚"},
]
}
})
</script>
在 li 中使用屬性綁定class類樣式：
<li v-for="(item,index) in list" :class="{active: index%2 == 0}">
{
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>
輸出結(jié)果為：
我們也可以在數(shù)據(jù)中心 定義 一個(gè)
mark，通過定義 mark 的值來做到讓某一行 單獨(dú)引用 class類
<li v-for="(item,index) in list" :class="{active: index === mark}">
{
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>
let vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"金克斯"},
{id:2,name:"杰斯"},
{id:3,name:"凱特琳"},
{id:4,name:"蔚"},
],
mark:0
}
})
此時(shí)只有索引為 0 的 引用了樣式，即第一個(gè)：
3.多類封裝
多個(gè)類，可以直接封裝到對(duì)象中，在視圖層直接調(diào)用對(duì)象名即可！
多個(gè)類，可以將其放置在對(duì)象中，在視圖層就是一個(gè)對(duì)象名稱，在數(shù)據(jù)中心
data中是一個(gè)對(duì)象，對(duì)象中羅列出多個(gè)類
<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
}
}
})
輸出結(jié)果為：
也可以在自定義計(jì)算屬性，封裝在函數(shù)中，在返回調(diào)用
let vm = new Vue({
el:"#app",
computed:{
// 1. 自定義的計(jì)算屬性名，
// 2.計(jì)算屬性做的事情，我們將其封裝到函數(shù)中
myclass(){
return {
"f50":true,
"blue":true,
"background":true
}
}
}
})
<p :class="myclass">中國人</p>
輸出結(jié)果一致
4.可以直接在 v-bind：中使用數(shù)組形式使用class類
.f50{
font-size: 50px;
}
.blue{
color: blue;
}
.background{
background-color: black;
}
<!-- 注意，class 名要加引號(hào) -->
<p :class="['f50','blue','background']">一周又一周</p>
輸出結(jié)果：
到此這篇關(guān)于Vue中使用 class 類樣式的方法詳情的文章就介紹到這了,更多相關(guān)Vue中使用 class 類樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue字符串中如何添加多個(gè)空格問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue-router單頁面路由的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
無論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開源軟件包。本文主要介紹了35個(gè)最好用的Vue開源庫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了如何通過vue實(shí)現(xiàn)微博中常見的@人的功能，同時(shí)增加鼠標(biāo)點(diǎn)擊事件和一些頁面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
這篇文章主要介紹了vue中按鈕操作完刷新頁面的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問題
這篇文章主要介紹了vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例
這篇文章主要介紹了vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue安裝和使用scss及sass與scss的區(qū)別詳解
這篇文章主要介紹了vue安裝和使用教程，用了很久css預(yù)編譯器，但是一直不太清楚到底用的sass還是scss，直到有天被問住了有點(diǎn)尷尬，感興趣的朋友一起看看吧2018-10-10
vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02