Vue.js 绑定 class 的几种方式
2019-08-01 本文已影响0人
Rinaloving
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绑定 class 的几种方式</title>
</head>
<body>
<!--给 v-bind:class 设置一个对象，可以动态地切换class,例如：-->
<div id="app">
<div :class="{'active': isActive }"></div>
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true
}
})
</script>
</body>
</html>
上例子中，类名active依赖于数据isActive，当其为true时，div会拥有类名Active，为 false时则没有，所以上例子的最终渲染结果是：
v-bind class设置一个对象.png
