vue :class 动态绑定样式_Notes04vbind动态绑定class

点击二白夫人

不许错过我

v-bind动态绑定class

••••

操作软件:Webstorm

插件：vue.js  //从官网下载https://cn.vuejs.org/v2/guide/installation.html

v-bind

作用：动态绑定属性

缩写(语法糖)：：

例如

等同于

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

1、v-bind的基本使用

/span>html>lang="en">charset="UTF-8">Title

id="app">{{message}}v-bind:src="imgURL" alt="">v-bind:href="aHref">百度href="http://www.baidu.com">百度一下

2、v-bind动态绑定class(对象语法)

语法格式：

 >

//动态绑定写法  { }大括号里面的内容表示对象  变量放在data：{} 里面写了

{{message}}

/span>html>lang="en">charset="UTF-8">Title.active {
       color: red
     }
   

id="app">

v-bind:class = "{active:isActive,line: isLine}">{{message}}

v-on:click="btnClick">按钮

注明：  =！表示取反符号  

代码解释：这里的类名1和类名2分别是active和line，变量是isAcitve和isLine，isAcitve和isLine的值放在data里面实现。

(点击按钮字体颜色会转换)

也可以把

{{message}}

换成

{{message}}

  就需要在后面调用一个getClass方法(写在methods里面)

getClasses: function () {return {active:this.isActive,line: this.isLine}
 }

3、v-bind动态绑定class(数组语法)

用得比较少 

数组用[ ]

/span>html>lang="en">charset="UTF-8">

id="app">

v-bind:class="[active, line]">{{message}}

v-bind:class="getClasses()">

小总结：

v-bind用于绑定一个或多个属性值；v-bind绑定class(类)有两种形式： 1、对象形式，用{ };2、数组形式，用[ ]；数组形式用的比较少，不灵活。