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