使用Class样式
代码如下：
<!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>
<style>
.color{
color:red;
}
.thin{
/* 瘦体 */
font-weight: 100;
}
.active{
letter-spacing:0.5em;
/* 间距大小 */
}
</style>
</head>
<body>
<div id="app">
<h1 class="color thin"> 好嗨哦</h1>
<!-- 第一种使用方式，直接传递一个数组，但是class需要 v-bind 进行数据绑定 -->
<h1 :class="['thin',flag?'active':'']"> 好嗨哦</h1>
<!-- 在数组中使用三元表达式 -->
<h2 :class="['thin',{'active':flag}]"> 好嗨哦</h2>
<!-- 在数组中使用对象来代替三元表达式，提高代码可读性 -->
<h2 :class="['thin',{'active':flag}]"> 好嗨哦</h2>
<!-- 直接使用对象,地市对象的属性是类名，可带引号，也可以不写 属性值是一个标识符-->
<h3 :class="{color:true, thin:true, active:false}"> 好嗨哦</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script>
var vm =new Vue({
el: '#app',
data:{
flag:true,
}
})
</script>
</body>
</html> 效果如下所示：
使用内联样式：
效果图如下;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
