vue之样式绑定

Typora好用

已于 2022-10-01 23:44:55 修改

阅读量302

点赞数

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

于 2022-10-01 23:44:04 首次发布

本文链接：https://blog.csdn.net/m0_55108781/article/details/127138801

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. class样式

写法:class=“xxx” xxx 可以是字符串、对象、数组。

2. style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

3.代码示例

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>绑定样式</title>
	<style>
		.basic {
			width: 400px;
			height: 100px;
			border: 1px solid black;
		}

		.happy {
			border: 4px solid red;
			;
			background-color: rgba(255, 255, 0, 0.644);
			background: linear-gradient(30deg, yellow, pink, orange, yellow);
		}

		.sad {
			border: 4px dashed rgb(2, 197, 2);
			background-color: gray;
		}

		.normal {
			background-color: skyblue;
		}

		.atguigu1 {
			background-color: yellowgreen;
		}

		.atguigu2 {
			font-size: 30px;
			text-shadow: 2px 2px 10px red;
		}

		.atguigu3 {
			border-radius: 20px;
		}
	</style>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
			绑定样式：
					1. class样式
								写法:class="xxx" xxx可以是字符串、对象、数组。
					2. style样式
								:style="{fontSize: xxx}"其中xxx是动态值。
								:style="[a,b]"其中a、b是样式对象。
		-->

	<div id="root">
		<!-- 绑定class样式 -- 字符串写法  适用于绑定少量样式-->
		<!-- 可以使用三元表达式 选择你想要的样式-->
		<div class="basic" v-bind:class="1==1 ? mood : 'mxp'" v-on:click="changeMood">{{name}}</div><br>
		<!-- 数组写法  适用于绑定多个样式--->
		<div class="basic" :class='classArr'>{{name}}</div><br>
		<!-- 对象写法 -->
		<div class="basic" :class='classObj'>{{name}}</div><br>

		<!-- 绑定style样式 -->
		<!-- 对象写法 -->
		<div class="basic" :style="styleObj">{{name}}</div><br>
		<!-- 数组写法 -->
		<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div><br>
		<div class="basic" :style="styleArr">{{name}}</div><br>

	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el: '#root',
		data: {
			name: '国庆快乐',

			mood: 'normal',
			classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
			classObj: {
				atguigu1: false,
				atguigu2: true
			},

			styleObj: {
				fontSize: 50 + 'px',
				color: 'red'
			},

			styleObj2: {
				backgroundColor: 'orange'
			},

			styleArr: [
				{
					fontSize: 50 + 'px',
					color: 'red'
				},
				{
					backgroundColor: 'orange'
				}
			]

		},

		methods: {
			changeMood(e) {
				//随机选择一个样式
				const arr = ['happy', 'sad', 'normal']
				const index = Math.floor(Math.random() * 3)
				this.mood = arr[index]
			}
		},
	})
</script>

</html>