Vue 绑定css和class :style :

最新推荐文章于 2024-08-09 17:31:50 发布

王懿诺

最新推荐文章于 2024-08-09 17:31:50 发布

阅读量110

点赞数

分类专栏： vue 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/TodayStartWJH/article/details/125023330

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

:style="{ 'color' : item. num == 2 ? '#000' : '#fff'}"
:style="{ 'color' : myColor}"

:class="['box', item.type== '已完成' ?'box1': item.type== '未完成? 'box2' : 'box3']"
:class=" [item.type== '已完成 ? ' box1 ':' box2']" >

www(type) {
 switch (type) {
	case type == "true":
		return color: red';
	case type == "false"
		return"color:#575757" ;
	break ;
 },
}


handlewidth(text, index, type, childrenData) {
	let borderstyle = "1px solid #ff" ;
	let width = text.length * 14;
	if (index == 0 && type == "table") borderStyle = "none";
	if (type = "flowchart") {
		borderStyle = "none' ;
		if (childrenData.length == 1) {
			return `border-left:${borderStyle};flex:1;`;
		}
		if (width <= 220 && width / 2<=220) {
			return `border-left:${borderStyle};width:270px;`;
		} else {
			return `border-left:${borderStyle};width:${width / 2 + 60}px`;
		}
		} else {
		if (childrenData.length == 1) {
			return : border- left : ${borderStyle};flex:1; ;
		}
		if (width <= 220) {
			return `border-left:${borderStyle};width:220px;`;
		} else if (width <= 220 && width / 2<=220) {
			return `border-left:${borderStyle};width:220px;`;
		} else {
			return `border-left:${borderStyle};width:${width / 2 + 10}px`;
		}  
  }
},


//图片
<img class style="width:100%;” :src="url" alt />
this.url= require(' ./ ../../../ ../ common/ assets/img/1.png )



//背景图片
navStyle(index,item){
	if(index == item){
		return(
		"background: url(" +
		require(' /../../../ ../ common/ assets/ img/ danStatus/DF-5A.png) +
		”no-repeat; background-size: 100% 100%”
		);
	}
}