uniapp中動態(tài)style問題

這是我的代碼設(shè)置了根據(jù)傳參顯示不同字體顏色和不同背景色

這兩個方法我都寫在methods中

methods: {
	// // 添加不同背景顏色
			getBackColor(val) {
			  let color = "";
			  switch (val[4]) {
			    case 0:
			      color = `background:${this.colors[0]}`;
			      break;
			    case 1:
			      color = `background:${this.colors[1]}`;
			      break;
			    case 2:
			      color = `background:${this.colors[2]}`;
			      break;
			    case 3:
			      color = `background:${this.colors[3]}`;
			      break;
			    case 4:
			      color = `background:${this.colors[4]}`;
			      break;
			  }
			  return color;
			},
			// 添加不同字體顏色
			getColor(val) {
			  let color = "";
			  switch (val[4]) {
			    case 0:
			      color = `color:${this.fontColors[0]}`;
			      break;   
			    case 1:    
			      color = `color:${this.fontColors[1]}`;
			      break;   
			    case 2:    
			      color = `color:${this.fontColors[2]}`;
			      break;   
			    case 3:    
			      color = `color:${this.fontColors[3]}`;
			      break;   
			    case 4:    
			      color = `color:${this.fontColors[4]}`;
			      break;
			  }
			  return color;
			},
}

在瀏覽器中H5和app模擬器的效果是一樣的如圖

在HbuildX中運(yùn)行至微信開發(fā)者工具無效，并且報(bào)錯如圖

解決方案

第一步

第二步 在computed添加如下代碼

computed: {
			// 在微信小程序端:style不生效 特殊處理
			// 添加不同背景顏色
			getBackColor() {
			//在computed中 打印 val 就是上面調(diào)用getBackColor(dayobject.calendarData)傳過來的值
			  return val=> {
				let style = {};
				switch (val[4]) {
				  case 0:
				    style.backgroundColor = this.colors[0];
				    break;
				  case 1:
					style.backgroundColor = this.colors[1];
				    break;
				  case 2:
					style.backgroundColor = this.colors[2];
				    break;
				  case 3:
					style.backgroundColor = this.colors[3];
				    break;
				  case 4:
					style.backgroundColor = this.colors[4];
				    break;
				}
				return style;  
			  } 
			},
			// 添加不同字體顏色
			getColor() {
				return val => {
					let style = {};
					switch (val[4]) {
					  case 0:
					    style.color = this.fontColors[0];
					    break;   
					  case 1:    
					    style.color = this.fontColors[1];
					    break;   
					  case 2:    
					    style.color = this.fontColors[2];
					    break;   
					  case 3:    
					    style.color = this.fontColors[3];
					    break;   
					  case 4:    
					    style.color = this.fontColors[4];
					    break;
					}
					return style;
				}
			},
		},

至此修改成功，微信開發(fā)者工具運(yùn)行效果如圖所示

注意事項(xiàng)
我本來是參照methods方法復(fù)制到computed中的，但是發(fā)現(xiàn)返回的color=‘background:#123C7F’,可是并沒有效果。于是對方法進(jìn)行了重寫，重新定義了一個style={}對象返回值就是對象形式 { color: ‘#123C7F’ }就可以正常顯示 ，一定要返回對象的形式。文章來源地址http://www.zghlxwxcb.cn/news/detail-596182.html

到了這里，關(guān)于uniapp中微信小程序不能編譯style綁定方法的解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！