版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40990854/article/details/89070057
Vue 中的样式绑定分为两种
- class
- 以对象的形式，给对应的字段名指定 相应的类名
- 以数组的形式，往该数组中添加 想要设置 成为的类
- style
- 以对象的形式，给这个对象设置CSS 样式，相当于 写CSS 样式一样
- 以数组的形式，直接往数组中增删 相应的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的样式绑定</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style type="text/css">
.actived{
color: red;
}
</style>
</head>
<body>
<!--
1、:class={actived:isActived} class 对象绑定
2、:class='[actived]'
3、:style="styleObj"
4、:style="[styleObj]"
-->
<div id="app">
<div
@click='handleDivClick'
:style="styleObj"
>
Hello World
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
isActived:true,
actived:'',
styleObj:{
color:'red',
}
},
methods:{
handleDivClick:function () {
this.styleObj.color = this.styleObj.color === 'red' ? 'black' : 'red';
}
}
});
</script>
<!-- <div id="app">
<div
@click='handleDivClick'
:class='[actived]'
>
Hello World
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
isActived:true,
actived:''
},
methods:{
handleDivClick:function () {
this.actived = this.actived === 'actived' ? '' : 'actived';
}
}
});
</script> -->
</body>
</html>