<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<style>
.red {
color: blueviolet;
}
.thin {
font-weight: 200;
}
.ilalic {
font-style: italic;
}
active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<!--
不写引号,会从vm里面去找-->
<div id="app">
<!-- 1.css普通写法 -->
<!-- <h1 class="active red">{{msg}}</h1> -->
<!--2.直接传递一个数组,这里的class需要使用v-Bind做数据绑定 里面要写引号,不然会把它当做一个变量在vm里面去找 -->
<!-- <h1 v-bind:class="['active','red']">{{msg}}</h1> -->
<!-- 3.在数组中使用三元表达式(麻烦) -->
<!-- <h1 v-bind:class="['active','red',flag?'thin':'']">这是一个标签</h1> -->
<!-- 4.在数组中使用对象的形式代替三元表达式 -->
<!-- <h1 v-bind:class="['active','red',{'thin':flag}]">这是一个标签</h1> -->
<!-- 5.直接使用对象 对象的属性的类名,由于对象的属性可带引号也可不带,所以这里没写引号,属性的值是一个标识符 -->
<!-- <h1 v-bind:class="{red:true,thin:true,ilalic:false}">这是一个标签</h1> -->
<h1 v-bind:class="classObj">这是一个标签</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
// msg:"我是一个标签",
flag: true,
classObj:{red:true,thin:true,ilalic:false}
},
methods: {
}
})
</script>
</body>
</html>
Vue——07——使用样式class
猜你喜欢
转载自blog.csdn.net/x1037490413/article/details/107065838
今日推荐
周排行