Vue中的样式绑定详解

效果：

在页面上有一个文字“hello",点击hello的时候，文字颜色变成红色，再点击，文字颜色又变成黑色。那么颜色的变化，我们需要通过css样式来控制。

方法1：

<div id="root" @click='handleClick' :class='{actived:isActived}'>         Hello World     </div>      <script>                  // 父组件         new Vue({             el:"#root",              data:{                 isActived:false,             },                          methods:{                 handleClick:function(){                      this.isActived=!this.isActived;                 }             }                      })     </script>     <style>         .actived{             color: red;         }     </style>

解释下这个写法:class='{actived:isActived}'，如果isActived是false，则class='',如果isActived是true,则class='actived'。

方法2：

<div id="root" @click='handleClick' :class='[isActived]'>         Hello World     </div>      <script>                  // 父组件         new Vue({             el:"#root",              data:{                 isActived:'',             },                          methods:{                 handleClick:function(){                      this.isActived=this.isActived===''?'actived':'';                 }             }                      })     </script>      <style>         .actived{             color: red;         }     </style>

这种方法我们是给了一个数组，数组中传递一个默认的空值isActived，当鼠标点击的时候，就会触发handleClick方法，在这里我们通过三元运算符来获取this.isActived的值。

和三元运算符同样效果的就是用if判断：

 if(this.isActived==''){        this.isActived='actived';      }else{        this.isActived='';  }

在上面我们是直接用class来实现效果，那么html中style样式如何实现呢？代码并不难，我们可以仿照第二个来试试效果：

<div id="root" @click='handleClick' :style='styleObj'>         Hello World     </div>      <script>                  // 父组件         new Vue({             el:"#root",              data:{                 styleObj:{                     color:'black'                 },             },                          methods:{                 handleClick:function(){                      this.styleObj.color=this.styleObj.color==='black'?'red':'black';                 }             }                      })     </script>

相关推荐：《javascript高级教程》

以上就是Vue中的样式绑定的讲解，同一个效果有很多种实现方法，条条大路通罗马，小伙伴get起来吧！

以上就是Vue中的样式绑定详解的详细内容，更多内容请关注技术你好其它相关文章！