Vue.js04:vue样式-通过属性绑定方式为元素设置class类样式
- <!-- 传统写法 -->
<h1 class="red thin">这是一个h1标签</h1>
- <!-- 第一种使用方式,直接传递一个数组 -->
<h1 :class="['red', 'italic']">这是第二个h1标签</h1>
- <!-- 在这里可以使用三元表达式 -->
<h1 :class="['red', 'italic', flag?'active':'']">这是第三个h1标签</h1>
- <!-- 简化写法 在数组中使用对象来代替三元表达式 -->
<h1 :class="['red','italic',{'active':flag}]">这是第四个h1标签</h1>
- <!-- 直接使用对象 -->
<h1 :class="{red:true, italic:false, thin:true, active:flag}">来来来,大战一场</h1>
<!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>
<!-- 引入 vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/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 thin">这是一个h1标签</h1>
<!-- 第一种使用方式,直接传递一个数组 -->
<h1 :class="['red', 'italic']">这是第二个h1标签</h1>
<!-- 在这里可以使用三元表达式 -->
<h1 :class="['red', 'italic', flag?'active':'']">这是第三个h1标签</h1>
<!-- 简化写法 在数组中使用对象来代替三元表达式 -->
<h1 :class="['red','italic',{'active':flag}]">这是第四个h1标签</h1>
<!-- 直接使用对象 -->
<h1 :class="{red:true, italic:false, thin:true, active:flag}">来来来,大战一场</h1>
</div>
<div id="article">
<p class="green thin">我的段落1</p>
<p :class="{red:true, active: pres}">我的段落2</p>
</div>
</body>
<script>
// 实例化vue对象
let vm1 = new Vue({
// 绑定对象
el: '#app',
data: {
flag: true
},
methods: {
}
})
let vm2 = new Vue({
el: '#article',
data: {
pres: false
}
})
</script>
</html>
以上是 Vue.js04:vue样式-通过属性绑定方式为元素设置class类样式 的全部内容, 来源链接: utcz.com/z/376676.html