本文最后更新于2019年1月21日，已超过一年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
在开发的过程中我们需要对一些dom元素添加一些样式，那么在vue中我们要如何给dom绑定样式呢？我们先通过一个实例来了解一下，本文通过三种方法来实现：
效果图：
class的对象绑定
- <style>
- .activated {
- color: red;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div @click="handleDivClick"
- :class="{activated: isActivated}">
- Hello world
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- isActivated: false
- },
- methods: {
- handleDivClick: function() {
- this.isActivated = !this.isActivated;
- }
- }
- })
- </script>
实现的效果是，打开页面，Hello world的文字默认是没有样式效果的，点击一下就会变为红色，再点击就会变为默认颜色，这是因为我给Hello world添加了点击事件，并给Hello world添加了对象样式为activated，状态为isActivated，isActivated默认为false不显示样式，当我们点击Hello world的文字时，会触发handleDivClick函数，这个函数会改变isActivated为相反的状态。
class的变量绑定
同样的，我们来以一个实例来进行说明，代码如下：
- <style>
- .activated {
- color: red;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div @click="handleDivClick"
- :class="[activated]">
- Hello world
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- activated: ""
- },
- methods: {
- handleDivClick: function() {
- this.activated = this.activated === "activated" ? "" : "activated";
- }
- }
- })
- </script>
实现的效果和上面的代码一样，都是点击变色，但是不同的是这个class绑定的是一个数组，数组里面写的是一个变量，既然是数组那么就可以在里面写入多个变量，比如我们在上面代码的第十行这样写:class="[activated,activatedOne]">然后在data中写上activatedOne: "activated-one"，那么打开页面Hello world的默认样式就是名字为activated-one的样式。
class的内联样式
我们来看一下代码：
- <div id="app">
- <div :style="styleObj" @click="handleDivOclick">
- Hello world
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- styleObj: {
- color: "black"
- }
- },
- methods: {
- handleDivOclick: function () {
- this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
- }
- }
- })
- </script>
实现的效果和上面的代码一样，也是点击变色，不同的是采用内联样式，这里我就不在赘述了，看代码就可以看出来。
最后
无论是绑定style还是绑定class都有两种方式，一种是对象的方式，一种是数组的方式。
微信小程序
互联网开发，终身学习者，欢迎您的关注！
