<!DOCTYPE html>
<html lang="zh_CN">
<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>
.red {
color: red
}
.size {
font-size: 50px;
}
.italic {
font-style: italic
}
</style>
</head>
<body>
<!-- V -->
<div id="app">
<!-- <h1 class="red size">类样式的绑定</h1> -->
<h1 :class="['red','size']">类样式的绑定</h1>
<h1 :class="['red','size',isItalic?'italic':'']">类样式的绑定</h1>
<h1 :class="clsObj">类样式的绑定</h1>
</div>
<script src="./script/vue.js"></script>
<script>
//创建Vue实例
//VM
var vm = new Vue({
el: "#app",
//M
data: {
isItalic: false,
clsObj: { red: true, size: false, italic: false }
},
methods: {
},
})
</script>
</body>
</html>