<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue的学习</title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><!-- test是一个普通的css的样式 --><!-- v-bind对class样式进行绑定，通过isActive来判断是否对样式的修饰 --><!-- v-bind:class="{active:isActive,gree:isGree}" --><!-- 第二种方式，也可以通过元组里面调用三目运算的方式进行修饰 --><div class="test" v-bind:class="[isActive?'active':'',isGree?'gree':'']" style="width: 200px;height: 200px;text-align: center;line-height: 200px;">hi Vue</div><br /><!-- 通过v-bin绑定style样式 --><div :style="{color:color,fontSize:fontsize,background:isRed?'red':''}">hello Ryan</div></div><script type="text/javascript">var vm = new Vue({el: "#app",data: {isActive: true,isGree: true,color: "blue",fontsize: '30px',isRed: false,}});</script><style type="text/css">.test {font-size: 30px;}.active {background: red;}.gree {color: green;}</style></body>
</html>本节对class与style的绑定内容就学习完毕了！！！
