Vue实现动态样式的多种方法汇总
作者：明天也要努力
本文要给大家介绍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实现动态样式的资料请关注脚本之家其它相关文章！