VUE(3) vue中使用样式class，style
程序员文章站
2022-07-04 21:19:00
...
使用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>