v-bind绑定class或style的基础语法
v-bind绑定class
方式一:对象语法
对象语法的含义是:class后面跟的是一个对象
<h2 :class="{类名1: value1, 类名1: value2}">{{message}}</h2>
用法一:直接通过{}绑定一个类 <h2 :class="{active: isActive}">Hello World</h2> 用法二:也可以通过判断,传入多个值 <h2 :class="{active: isActive, line: isLine}">Hello World</h2> 用法三:和普通的类同时存在,并不冲突 注:如果isActive和isLine都为true,那么会有title/active/line三个类 <h2 class="title" :class="{active: isActive, line: isLine}">Hello World</h2> 用法四:如果过于复杂,可以放在一个methods或者computed中 注:classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2>
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; }
.line{
border-bottom:1px solid #000;
} </style> </head> <body> <div id="app"> <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2> <h2 class="title" v-bind:class="changeClass()">{{message}}</h2> <button v-on:click="btnClick">按钮</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'bind绑定class', isActive: true, isLine: true }, methods: { btnClick(){ this.isActive = !this.isActive }, changeClass(){ return {active: this.isActive, line: this.isLine} } } }) </script> </body> </html>
方式二:数组语法
数组语法的含义是:class后面跟的是一个数组
用法一:直接通过{}绑定一个类 <h2 :class="[active]">Hello World</h2> 用法二:也可以传入多个值 <h2 :class="[active, line]">Hello World</h2> 用法三:和普通的类同时存在,并不冲突 注:会有title/active/line三个类 <h2 class="title" :class="[active, line]">Hello World</h2> 用法四:如果过于复杂,可以放在一个methods或者computed中 注:classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2>
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } .line { border-bottom:1px solid #000; } </style> </head> <body> <div id="app"> <h2 class="title" :class="[active, line]">{{message}}</h2> <h2 class="title" :class="changeClass()">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'v-bind绑定class', }, methods: { changeClass: function () { return [this.active, this.line] } } }) </script> </body> </html>
v-bind绑定style
方式一:对象语法
对象语法的含义是:style后面跟的是一个对象
<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值,值可以来自于data中的属性
:style="{color: 'red', fontSize:'50px'}"
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2 class="title" :style="{color: 'red', fontSize: '50px'">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'v-bind绑定style', } }) </script> </body> </html>
方式二:数组语法
数组语法的含义是:class后面跟的是一个数组
style后面跟的是一个数组类型
多个值以,分割即可
<div v-bind:style="[bgc, fontsize]"></div>
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2 :style="[bgc, fontsize]">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', bgc: {backgroundColor: 'red'}, fontsize: {fontSize: '100px'}, } }) </script> </body> </html>