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>