Vue中使用?class?類(lèi)樣式的方法詳情
更新時(shí)間：2021年11月22日 09:22:06 作者：最?lèi)?ài)喝怡寶
這篇文章主要介的是?Vue中如何使用?class?類(lèi)樣式的方法，在vue中為我們提供了幾種方式來(lái)使用class類(lèi)的樣式，分別是布爾值、表達(dá)式、多類(lèi)封裝、下面來(lái)看看文章的詳細(xì)介紹內(nèi)容吧,需要的朋友可以參考一下
在vue中為我們提供了 幾種方式來(lái)使用class類(lèi)的樣式
1. 布爾值
我們先正常在
style 標(biāo)簽中 書(shū)寫(xiě)一個(gè)類(lèi)名為 active的樣式
<style>
.active{
color: red;
font-size: 20px;
font-style: normal;
}
</style>
在我們的
script 標(biāo)簽中創(chuàng)建一個(gè) vm 實(shí)例，在實(shí)例的 data 數(shù)據(jù)中心寫(xiě)上 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類(lèi)
<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)滿(mǎn)足該條件時(shí)，調(diào)用該
class 類(lèi)舉例，我們?cè)跀?shù)據(jù)中心
data 中有一個(gè)對(duì)象數(shù)組，把他渲染到視圖層上，我想讓 索引為 偶數(shù)的引用class 類(lèi)樣式：
<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類(lèi)樣式：
<li v-for="(item,index) in list" :class="{active: index%2 == 0}">
{
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>
輸出結(jié)果為：
我們也可以在數(shù)據(jù)中心 定義 一個(gè)
mark，通過(guò)定義 mark 的值來(lái)做到讓某一行 單獨(dú)引用 class類(lèi)
<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.多類(lèi)封裝
多個(gè)類(lèi)，可以直接封裝到對(duì)象中，在視圖層直接調(diào)用對(duì)象名即可！
多個(gè)類(lèi)，可以將其放置在對(duì)象中，在視圖層就是一個(gè)對(duì)象名稱(chēng)，在數(shù)據(jù)中心
data中是一個(gè)對(duì)象，對(duì)象中羅列出多個(gè)類(lèi)
<style>
.f50{
font-size: 50px;
}
.blue{
color: blue;
}
.background{
background-color: black;
}
</style>
<body>
<div id="app">
<p :class="classObject">中國(guó)人</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">中國(guó)人</p>
輸出結(jié)果一致
4.可以直接在 v-bind：中使用數(shù)組形式使用class類(lèi)
.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 類(lèi)樣式的方法詳情的文章就介紹到這了,更多相關(guān)Vue中使用 class 類(lèi)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
vue2.x數(shù)組劫持原理的實(shí)現(xiàn)
這篇文章主要介紹了vue2.x數(shù)組劫持原理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實(shí)現(xiàn)方法,我們?cè)賹?shí)際應(yīng)用中可能需要input文本框能夠根據(jù)輸入字符的所占據(jù)的寬度自動(dòng)調(diào)節(jié)尺寸,需要的朋友可以參考下2023-08-08
Vue組件Draggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue組件Draggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了使用Vue?CLI配置代碼壓縮、加密和混淆功能,通過(guò)配置 vue.config.js 文件，我們可以使用 Vue CLI 輕松實(shí)現(xiàn)對(duì) Vue 應(yīng)用程序代碼的壓縮、加密和混淆，需要的朋友可以參考下2023-06-06
淺談vue-cli5關(guān)于yarn的一個(gè)小坑
本文主要介紹了vue-cli5關(guān)于yarn的一個(gè)小坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue如何優(yōu)雅的使用全局WebSocket問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法
這篇文章主要介紹了Vue3子組件watch無(wú)法監(jiān)聽(tīng)父組件傳遞的屬性值的解決方法,文中通過(guò)代碼示例講解的講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
Vue?Router嵌套路由(children)的用法小結(jié)
嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由導(dǎo)航和路由容器（router-link、router-view），通過(guò)配置children可實(shí)現(xiàn)多層嵌套，這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下2022-08-08
Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)
這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細(xì)完整教程,在這大家要記住整個(gè)項(xiàng)目的json文件不能有注釋,及時(shí)沒(méi)報(bào)錯(cuò)也不行,否則運(yùn)行命令時(shí)還是有問(wèn)題,具體細(xì)節(jié)問(wèn)題參考下本文詳細(xì)講解2024-02-02