VUE(3) vue中使用样式class，style

使用class样式<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="lib/vue.js"></script><s...

就是三木啊

4076人浏览 · 2019-09-11 15:09:16

就是三木啊 · 2019-09-11 15:09:16 发布

使用class样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入vue包 -->
		<script src="lib/vue.js"></script>
		<style>
			.red{
				color:red;
			}
			.thin{
				font-weight:200;
			}
			.italic{
				font-style:italic;
			}
			.active{
				letter-spacing: 0.5em;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<!-- <h1 :class="['red','italic']">大大大大大大大大大</h1> -->
			<!-- <h1 :class="['red','italic',flag?'active':'']">大大大大大大大大大</h1> -->
			<!-- <h1 :class="['red','italic',{'active':flag}]">大大大大大大大大大</h1> -->
			 <!-- <h1 :class="{red:true,thin:true,italic:false}">大大大大大大大大大</h1> -->
			 <h1 :class="objectclass">大大大大大大大大大</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					flag:true,
					objectclass:{red:true,thin:true,italic:false}
				},
				methods:{
					
				}
			});
		</script>
	</body>
</html>

1.使用数组

直接传递数组，注意：这里的class需要使用v-bind做数据绑定

<h1 :class="['red','italic']">大大大大大大大大大</h1>

2.在数组中使用三元表达式

<h1 :class="['red','italic',flag?'active':'']">大大大大大大大大大</h1>

3.数组中嵌套对象

在数组中使用对象代替三元表达式

<h1 :class="['red','italic',{'active':flag}]">大大大大大大大大大</h1>

4.直接使用对象

再为class使用v-bind 绑定对象的时候，对象的属性是类名，由于对象的属性可带引号也可不带，所以我没写，属性的值是一个标识符

<h1 :class="{ red:true,italic:true}]">大大大大大大大大大</h1>

还可以在data里边创建一个对象

在data上定义样式：

data:{
	objectclass : { red:true,italic:true,italic:false}
}

在元素中，通过属性绑定的类，绑定到元素中

 <h1 :class="objectclass">大大大大大大大大大</h1>

使用内联样式

1.直接在元素上通过`:style` 的形式，书写样式对象

注意：像font-size这样中间有-的，加引号

<h1 :style="{color:'red','font-size':'40px'}"> 这是一个h1</h1>

2.将样式对象，定义到`data`中，并直接引用到`:style`中

在data上定义样式：

data:{
	h1styleobj : {color:'red','font-size':'40px','font-weight':'200'}
}

在元素中，通过属性绑定的形式，绑定到元素中

 <h1 :class="h1styleobj">这是一个h1</h1>

在`:style`中通过数组，引用多个`data`上的央视对象

在data上定义样式

data : {
	h1styleobj:{color:red},
	h1styleobj2:{'font-size':'40px'}
}

在元素中，通过属性绑定的形式，绑定到元素中

<h1 :style="[h1styleobj,h1styleobj2]">这是一个h1</h1>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^