样式绑定（class style）

最新推荐文章于 2023-12-12 15:24:49 发布

m0_47761892

最新推荐文章于 2023-12-12 15:24:49 发布

阅读量505

点赞数

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

本文链接：https://blog.csdn.net/m0_47761892/article/details/128788057

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

样式绑定

1.class属性绑定
1.1 普通数据绑定
:class=“active” active在data选项中定义，它的值为类样式表名称
1.2 对象语法
v-bind:class={activevalue:isActive} , isActive是在data选项中定义的布尔值,activevalue类样式表名称
v-bind:class=“classObj” classObj是在data选项中定义的对象
v-bind:class=“comObj” comObj是使用计算属性返回的样式对象（常用且强大的模式）
1.3 数组语法
:class=“[active,size]” active size为数据对象data中的属性，他们的值为类样式表名称
:class=“[isActive?activeClass : ‘’, errorClass]” 也可以使用三元表达式
:class=“[{activeClass:isActive}, errorClass]” 数组中使用对象，减少多个三元表达式的繁琐
2.style属性绑定
2.1 对象语法
:style=“{fontWeight:‘bold’,‘font-size’:‘25px’,color:‘blue’}”
:style=“datastyle” datastyle是在data选项中定义的对象
:style=“comarr” comarr是使用计算属性返回的样式对象
2.2 数组语法
:style=“[color1,decoration]” color1、decoration为数据对象data中的属性，他们的值为样式对象
:style=“[{color:‘blue’},{‘text-decoration’:‘underline’}]” 也可以直接在元素中绑定样式对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式绑定</title>
		<script src="js/v2.6.10/vue.js" type="text/javascript"></script>
		<style type="text/css">
			.activevalue{
				margin: 30px;
				font-style: italic;
				color: red;
			}
			.sizevalue{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div >Vue.js样式绑定</div>
			<div :class="active">Vue.js样式绑定</div>
			<div :class="{activevalue:isActive,sizevalue:isSize}">Vue.js样式class属性 对象形式 绑定</div>
			<div :class="classObj">Vue.js样式class属性在 data选项 以对象形式 中定义</div>
			<div :class="comObj">Vue.js样式class属性在 计算属性 中定义</div>
			<div :class="[active,size]">Vue.js样式class属性 以数组形式 定义</div>
			<hr>
			<!-- // style内联样式中不要忘记加 {},
			特别是和变量拼接的时候，参见component2-1 -->
			<div :style="{fontWeight:'bold','font-size':'25px',color:'blue'}">Vue.js样式style属性以 对象形式 绑定</div>
			<div :style="datastyle">Vue.js样式style属性在data选项中以 对象形式 绑定</div>
			<div :style="comarr">Vue.js样式style属性在 计算属性 中定义</div>
			<div :style="[color1,decoration]">Vue.js样式style属性以 数组形式 定义</div>
		</div>
		<script>
			var demo=new Vue({
				el:'#app',
				data:{
					active:'activevalue',
					size:'sizevalue',
					isActive:true,
					isSize:true,
					weight:'bold',
					fontsize:30,
					color1:{color:'blue'},
					decoration:{'text-decoration':'underline'},
					classObj:{
						activevalue:true,
						sizevalue:true
					},
					datastyle:{
						fontWeight:'bold',
						'font-size':'25px',
						color:'blue'
					}
				},				
				computed:{
					comObj(){
						return {
							sizevalue:this.isSize,
							activevalue:this.isActive
						}
					},
					comarr(){
						return{
							fontWeight:this.weight,
							'font-size':this.fontsize+'px',
							color:'blue'
						}
					}
				},
			
			});
		</script>
	</body>
</html>