computed动态切换style
我要改变的时引入的背景图片
html
<div style="display: flex;">
<div class="title" :style="[(activeName==index ? choosed : unchoose)]" @click="choosTabs(item,index)" v-for="(item,index) in tabs" :key="index">
<i class="el-icon-picture-outline"></i>
{{item.title}}
</div>
</div>
js
export default{
data(){
return{
activeName:0,
url:'', //选中时的url ,自己赋值
url2:'', //没选中时的url
tabs:[{title:'大熊',id:0},{title:'静香',id:1},{title:'哆啦A梦',id:2}]
}
},
computed: {
unchoose(){
return {
color:'#247ba0',
backgroundImage: "url(" +this.url2 + ")",
backgroundRepeat: 'no-repeat',
backgroundSize: "100% 100%",
backgroundPosition: "center center"
}
},
choosed: function() {
return {
backgroundImage: "url(" +this.url+ ")",
backgroundRepeat: 'no-repeat',
backgroundSize: "100% 100%",
backgroundPosition: "center center"
}
},
// tabs切换
choosTabs(e,index){
this.activeName = index
},
},
}
css
.title {
font-size: 15px;
color: #ebc37a;
}