vue 点击 使用computed 动态切换style

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;		
		}