<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
<style>
.red{
color: red;
}
.thin{
font-weight:bold;
}
.italic{
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种方式,直接传递一个数组,注意:这里的 class 需要使用 v-bind 做数据绑定 -->
<h1 :class="['thin','red']">{{msg}}</h1>
<h1 :class="['thin','italic', flag ? 'red':'']">{{msg}}</h1>
<!-- 利用三元表达式 -->
<!-- 在数组中使用对象来代替三元表达式,来提高代码的可读性 -->
<h1 :class="['thin','italic',{'red':flag}]">{{msg}}</h1>
<!-- 再为class 使用 v-bind 绑定对象的时候,对象的属性是类名。由于对象的属性可带引号,也可以不带引号,所以这里没写引号,属性的值为标识符 -->
<h1 :class="{red: true,thin:false,italic:false}">{{msg}}</h1>
<h1 :class = "classObj">{{msg}}5</h1>
<!-- 第二种方法,直接在元素上通过 :style 的形式 -->
<h1 :style="{color:'blue','font-size':'40px'}">{{msg}}</h1>
<!-- 定义到data上 -->
<h1 :style="h1StyleObj">{{msg}}5</h1>
<!-- 通过数组,引用多个data的样式 -->
<h1 :style="[h1StyleObj,h2StyleObj]">6666666</h1>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:"这是一个div",
flag : false,
classObj: {red: true,thin:false,italic:false},
h1StyleObj: {color:'blue','font-weight':200},
h2StyleObj: {'font-style':'italic'}
},
methods:{}
})
</script>
</body>
</html>
vue class、style样式01
最新推荐文章于 2024-04-18 15:01:57 发布