Vue實現(xiàn)動態(tài)樣式的多種方法匯總
更新時間：2021年06月19日 08:49:04 作者：明天也要努力
本文要給大家介紹Vue實現(xiàn)動態(tài)樣式的多種方法，下面給大家?guī)韼讉€案列，需要的朋友可以借鑒研究一下。
1. 三元運算符判斷
<text :style="{color:state?'#ff9933':'#ff0000'}">hello world </text>
<script>
export default {
data() {
return {
state: true
}
}
}
</script>
2. 動態(tài)設置class
2.1 主要運用于：實現(xiàn)循環(huán)列表中點擊時，相應的元素高亮；（默認首個元素高亮）
<template>
<div class="wrapper" v-for="(item,index) in houseList" :key="index" @click="rightTap(index)">
<div class="houseTitle" :class="{'active' : index === rightIndex}">
{{item.name}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
rightIndex:0,
houseList:[]
};
},
methods:{
rightTap(index){
this.rightIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.wrapper{
width: 118px;
height: 60px;
margin: 6px auto 0 auto;
.houseTitle{
font-size: 22px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.active{
color:#2a7ffa;
background-color: pink;
}
}
</style>
2.2 主要運用于：為特定數(shù)值設置相應樣式；
<div
:class="activeId === item.id?'activeStyle':'machineBar'"
v-for="(item,index) in List" :key="index" @click="clickEvent">
<p>{{item.name}}</p>
</div>
3. 方法判斷
3.1 主要運用于：為不同的數(shù)據(jù)值設置相應的樣式；
<template>
<div v-for="(item,index) in houseList" :key="index">
<div :style="getStyle(item.status)">{{item.name}}</div>
</div>
</template>
<script>
export default {
data(){
return{
houseList:[
{
id:1,
name:1,
status:'a'
},{
id:2,
name:2,
status:'b'
},{
id:3,
name:3,
status:'c'
}
]
}
},
methods:{
getStyle(e){
console.log('值',e)
if(e === 'a'){
return {
width:'60px',
height:'60px',
background:'yellow',
margin: '10px auto'
}
}else if(e === 'b'){
return {
width:'60px',
height:'60px',
background:'red',
margin: '10px auto'
}
}else if(e === 'c'){
return {
width:'60px',
height:'60px',
background:'pink',
margin: '10px auto'
}
}
}
}
}
</script>
3.2 主要運用于：在元素多從事件下，顯示相應的樣式；
<template>
<div
class="homeWrap" :class="{'select': selected === 1,'click': clicked === 1}"
@click="handleClick(1)" @mousedown="menuOnSelect(1)">
主頁
</div>
</template>
<script>
export default {
return {
selected: 0,
clicked: 0
}
methods:{
menuOnSelect(value){
this.selected = value;
},
handleClick(value){
this.selected = 0
this.clicked = value
}
}
}
</script>
<style lang="stylus" scoped>
.homeWrap.select
background red
.homeWrap.click
background yellow
</style>
4. 數(shù)組綁定
<div :class="[isActive,isSort]"></div>
// 數(shù)組與三元運算符結合判斷選擇需要的class
<div class="item" :class="[item.name? 'lg':'sm']"></div>
<div class="item" :class="[item.age<18? 'gray':'']"></div>
// 數(shù)組對象結合
<div :class="[{ active: isActive }, 'sort']"></div>
data() {
return{
isActive:'active',
isSort:'sort'
}
}
// css
.active{
/*這里寫需要設置的第一種樣式*/
}
.sort{
/*這里寫需要設置的第二種樣式*/
}
5. computed結合es6對象的計算屬性名方法
<div :class="classObject"></div>
export default {
data(){
return{
isActive:true
}
},
computed:{
classObject() {
return{
class_a:this.isActive,
class_b:!this.isActive
// 這里要結合自身項目情況修改填寫
}
}
}
}
// css
.class_a{
/*這里寫需要設置的第一種樣式*/
}
.class_b{
/*這里寫需要設置的第二種樣式*/
}
以上就是Vue實現(xiàn)動態(tài)樣式的多種方法匯總的詳細內(nèi)容，更多關于Vue實現(xiàn)動態(tài)樣式的資料請關注腳本之家其它相關文章！
相關文章
vue給input file綁定函數(shù)獲取當前上傳的對象完美實現(xiàn)方法
這篇文章主要介紹了vue給input file綁定函數(shù)獲取當前上傳的對象完美實現(xiàn)方法,需要的朋友可以參考下2017-12-12
在Vue中使用SQLite數(shù)據(jù)庫的基礎應用詳解
這篇文章主要為大家詳細介紹了在Vue中使用SQLite數(shù)據(jù)庫的基礎應用,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-02-02
這篇文章主要為大家詳細介紹了Vue實現(xiàn)頁面中播放音頻文件的相關方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-02-02
Vue的.sync語法糖是一個用于雙向數(shù)據(jù)綁定的指令,可以在子組件中用來監(jiān)聽父組件傳遞下來的props的變化,本文給大家介紹了在Vue中,.sync語法糖的使用方法,感興趣的朋友跟著小編一起來學習吧2024-01-01
Vite結合Vue刪除指定環(huán)境的console.log問題
這篇文章主要介紹了Vite結合Vue刪除指定環(huán)境的console.log問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
詳解.vue文件中監(jiān)聽input輸入事件（oninput）
本篇文章主要介紹了詳解.vue文件中監(jiān)聽input輸入事件（oninput），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章介紹了vue為自定義路徑設置別名的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
本文主要介紹了Vue便簽的簡單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
這篇文章主要介紹了vue中兄弟組件傳值的兩種方式小結，具有很好的參考價值，希望對大家有所幫助。2022-07-07
這篇文章主要介紹了vue之如何配置默認顯示頁面和默認路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06