<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: green;
}
.delete {
background: red;
}
.error {
font-size: 35px;
}
</style>
</head>
<body>
<div id="app">
<h3>Class绑定,V-bind:class 或 :class</h3>
<p v-bind:class="activeClass">字符串表达式</p>
<!-- key值是样式名，value值是data中绑定的属性
当isDelete为true的时候，delete就会进行渲染
-->
<p v-bind:class="{delete:isDelete,error:isError}">对象表达式</p>
<p :class="['active','error']">数组表达式</p>
<h3>Style绑定,V-bind:style 或 :style</h3>
<p :style="{color:activeColor}">style样式</p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new new Vue({
el: '#app',
data: {
activeClass: "active",
isDelete: true,
isError: false,
activeColor:'red'
}
})
</script>
</body>
</html>