vue class与style绑定

落花见流水

已于 2022-12-29 22:14:57 修改

阅读量320

点赞数

分类专栏： css vue 文章标签： vue css 前端

于 2020-05-25 23:02:00 首次发布

本文链接：https://blog.csdn.net/qq_41913971/article/details/106343609

版权

vue 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

介绍

元素的class和style属于attribute，所以可以用v-bind处理。而在v-bind用于classhestyle时，vue.js专门增强了一下，接受的表达式结果除了字符串，还要数组和对象。

绑定class

字符串语法：

<div  v-for="(item, index) in list" :class="'demo' + index"></div>

<div v-for="(item, index) in lists">
	<i :class="item.icon"></i>
</div>

data () {
	return {
		list: [],
		lists: [
			{ icon: 'icon-like' },
			{ icon: 'icon-new' },
			{ icon: 'icon-share' }
		]
	}
}

对象语法：

//对象表达式
<div  class="demo" :class="{'demo-red': isActive, 'demo-green': !isActive}"></div>

data () {
	return {
		isActive: true,
	}
}

//绑定一个数据中的对象
<div  class="demo" :class="demoClassInfo"></div>

data () {
	return {
		isActive: true,
		demoClassInfo: {
			'demo-red': isActive,
			'demo-green': !isActive
		}
	}
}

//绑定一个计算属性
<div  class="demo" :class="demoClassInfo"></div>

data () {
	return {
		count: 0,
	}
}
cmputed: {
	demoClassInfo() {
		return  {
			'demo-green': count > 0 && count <= 100  ? true :  false,
			'demo-red': count > 100 ? true :  false,
		}
	}
}

数组语法：

//三元表达式
<div  class="demo" :class="[ isActive ? 'demo-red' : 'demo-green' ]"></div>

data () {
	return {
		isActive: true,
	}
}

<div  class="demo" :class="[demoClass1, demoClass2]"></div>

data () {
	return {
		demoClass1: 'demo-color',
		demoClass2: 'demo-size',
	}
}

<div  class="demo" :class="demoClassList"></div>

data () {
	return {
		demoClassList: [ 'demo-color', 'demo-size'],
	}
}

//绑定一个计算属性
<div  class="demo" :class="demoClassInfo"></div>

data () {
	return {
		count: 0,
	}
}
cmputed: {
	demoClassInfo() {
		return  [
			count > 0 && count <= 100  ? 'demo-green' : '',
			count > 100 ? 'demo-red' : ''
		]
	}
}

绑定style

css语法可以使用驼峰式（camelCase）、短横分隔命名(kabab-case)

对象语法：

<div  class="demo" :style="color: demoColor, fontSize: demoFontSize / 100 + ''rem'"></div>

data () {
	return {
		demoColor: 'red',
		fontSize: 24
	}
}

<div  class="demo" :style="demoStyleInfo"></div>

 data () {
	return {
		demoStyleInfo:  {
			demoColor: 'red',
			fontSize: '0.24rem'
		}
	}
}

数组语法：

<div  class="demo" :style="[demoColor, demoSize]"></div>

 data () {
	return {
		demoStyleInfo:  {
			demoColor: 'color: red',
			demoSize: 'fontSize: 0.24rem'
		}
	}
}