Vue :style+computed 或者 标签绑定方法实现动态样式

474 阅读1分钟

:style+computed动态样式

<button :style="styleStatic"></button>

computed:{
	styleStatic(){
		if(){
			return { 
				color:'#eee',
				border:'1px solid #eee'
			}
		}
	}
}

####标签绑定方法 返回样式

<button :style="styleStatic()"></button>

methods:{
    styleStatic(){
        if (this.theme === '红色') {
            return 'margin-top:-4px;';
          } else if (this.theme === '绿色') {
            return 'margin-top:-4px;';
          }
    }
}