Vue實現動態樣式的多種方法匯總
1. 三元運算符判斷
<text :style="{color:state?'#ff9933':'#ff0000'}">hello world </text> <script> export default { data() { return { state: true } } } </script>
2. 動態設置class
2.1 主要運用於:實現循環列表中點擊時,相應的元素高亮;(默認首個元素高亮)
<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 主要運用於:為特定數值設置相應樣式;
<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 主要運用於:為不同的數據值設置相應的樣式;
<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. 數組綁定
<div :class="[isActive,isSort]"></div> // 數組與三元運算符結合判斷選擇需要的class <div class="item" :class="[item.name? 'lg':'sm']"></div> <div class="item" :class="[item.age<18? 'gray':'']"></div> // 數組對象結合 <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實現動態樣式的多種方法匯總的詳細內容,更多關於Vue實現動態樣式的資料請關註WalkonNet其它相關文章!