目录
说明
class
style
说明
class与style本身是属性指令，但是他们比较特殊，应用更广泛。
# class
:class='变量'
变量可以为：字符串、数组、对象
推荐使用数组，因为class可以使用多个参数
# style
:style='变量'
变量可以为：字符串、数组、对象
推荐使用对象
class
# 先定义几个样式
<style>
.myfont{
font-size: 100px
}
.mycolor{
background-color: deeppink;
}
<!--测试class中的变量的简写-->
.my-color{
color: green;
}
</style>
# 定义示例
<div id="app">
<div :class="my_style">11111111</div>
</div>
# 定义样式
<script>
var vm = new Vue({
el: '#app',
data: {
// 示例中使用的方法，数组
my_style: ['myfont', 'mycolor'],
// 使用字符串
my_style2: 'myfont',
// 使用对象方式,格式为 类名:true/false，类名的引号可以忽略单引号
my_style3: {'myfont': true, 'mycolor2': true},
// 上面的简写
my_style3: {myfont: true, mycolor2: true}
// 上面的简写有一个例外，就是当定义变量时有 - 符号，则不可以简写，如：
my_style3: {myfont: true, mycolor2: true, 'my-color':true} // 这里的 my-color不能简写
},
})
</script>
效果如下：
后期也可以通过数组的一些方法追加或删除一些变量。
style
<div id="app">
<div :style="my_style2">11111111</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
my_style: 'color: green; font-size:100px; backg', // 字符串形式
my_style2: [{'color': 'red'}, {'font-size': '100px'}], // 数组形式，不带 - 符号的简写可以省略单引号
// 上面的简写如下，带 - 符号的可以用驼峰体简写
my_style3: [{color: 'red'}, {fontSize: '100px'}], // vm.my_style3[0].color='red'可修改样式
my_style4: {color: 'red', fontSize: '100px'} // 对象的形式写法，建议使用此方法，并且建议使用驼峰，因为可以使用my_style3.fontSize简写
}
})
</script>
