使用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>
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue