前言
CSS是前端中必不可少的一部分，那么在Vue中，我们又如何进行CSS样式的动态变化呢？
这一篇我们就来谈谈如何使用Vue来动态的改变样式
一、绑定HTML-css
1.对象语法
<body>
<div id="app">
<div class="static" v-bind:class="{active:isTrue}">
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isTrue: true
}
})
</script>
</body>
class中的是正常的样式，v-bind:class中就是我们Vue中绑定的样式。
{active:isTrue}是一个对象，isTrue决定了样式active是否保留。
当我们绑定多个样式时，可以采取：
{ active: isActive, fly: isFly,‘text-danger’: hasError }（当样式名中存在"-"等特殊符号时需要使用引号括起来，表示为一个字符串）
当然我们也可以把这个对象保存到Vue中的data中：
<body>
<div id="app">
<div class="static" v-bind:class="activeObject">
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activeObject: {
active: true,
'text-danger': false
}
}
})
</script>
</body>
2.数组语法
代码如下（示例）：
<body>
<div id="app">
<div class="static" v-bind:class="[activeClass]">
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activeClass: 'active'
}
})
</script>
</body>
二、绑定内联样式
1.对象语法
<body>
<div id="app">
<div v-bind:style="{color: activeColor}">颜色
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activeColor: 'red'
}
})
</script>
</body>
也可直接绑定到样式对象当中
<body>
<div id="app">
<div v-bind:style="activeColor">颜色
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activeColor: {
color: 'red'
}
}
})
</script>
</body>
2.数组语法
<body>
<div id="app">
<div v-bind:style="[activeColor]">颜色
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
activeColor: {
color: 'red'
}
}
})
</script>
</body>
总结
本次我们的Class与Style绑定，我们学习了class和style中的样式如何绑定的语法规则。
还有更多玩法，1.用在组件上。2.自动添加前缀。3.多重值等，大家可以到官网中去查看Vue之Class与Style绑定
本周推荐
工具：超强自动抠图软件
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
