vue动态绑定class和style，三目运算符条件判定

最新推荐文章于 2024-09-26 17:46:07 发布

原创最新推荐文章于 2024-09-26 17:46:07 发布 · 9.5k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端同时被 3 个专栏收录

30 篇文章

订阅专栏

实践

30 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文详细介绍了在Vue中如何动态地绑定class和style，包括通过对象和数组方式切换class，以及如何传递样式对象来改变元素样式。此外，还提供了多个实际应用的例子，如条件渲染按钮文本和输入框类名。

动态绑定class和style

给绑定的class/style传递一个对象，以动态切换

<div :class="{class1: isActive1, 'class2': isActive2}"
		:style="{width: size + 'px', color: colorStyle}"></div>

给绑定的class传递一个数组，以应有一个class列表

//三元运算
<div :class="[isActive1 ? class1 : '', class2]"></div>
//数组对象
<div :class=[{class1: isActive1}, class2]></div>

给绑定的style传递一个样式对象
*class也可以绑定样式对象，不过推荐使用计算属性

//一个样式对象
<div :style="styleObject1"></div>
//多个样式对象
<div :style="[styleObject1, styleObject2]"></div>

data:{
	styleObject1: {
		color：'#fff',
		width: '20px'
	},
	styleObject2: {
		color：'#000',
		width: '30px'
	}
}

其他例子

#标签内容（三目运算）

{{button？ ‘取消’ ：‘确定’}}

//【例子】
<el-button class="button" 
			type="primary" 
			@tap="handleClick">{{button? '取 消' : '确 定'}}
</el-button>

#类名

：class = “[className ? ‘xx’ : ‘xx’]”

//【例子】
<input :class="[className ? 'class1' : 'class2']"
		:model="inputValue"
		:placeholder="placeholder"
/>

#内联样式（多样式、两种写法、三目）

：style=“[{background: ${bgColor}, color: textColor}]”
（红色字由反引号括起）

//【例子】
<input v-model="text" 
		:placeholder="placeholder" 
		:style="[{background: `${bgColor}`, color: fontColor}]"/>
		
<input v-model="text" 
		:placeholder="placeholder" 
		 :style="{'color' : (isColor ? '#999':'#000')}" />