v-bind
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Class</title> </head> <style> .active { color: red; } </style> <body> <div id="app"> <!-- <h2 class="active"> {{message}}</h2>--> <!-- <h1 :class="active">{{active}}</h1>--> <h2 :class="{'active':isActive, 'line': isLine}">{{message}}</h2> <button @click="btnClick">But</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: "Hello", isActive: true, isLine : true }, methods : { btnClick: function () { // 原来值的取反 = ! this.isActive = !this.isActive } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Class</title> </head> <style> .active { color: red; } </style> <body> <div id="app"> <!-- <h2 class="active"> {{message}}</h2>--> <!-- <h1 :class="active">{{active}}</h1>--> <!-- <h2 class="title" :class="{'active':isActive, 'line': isLine}">{{message}}</h2>--> <!-- 注意调用方法的时候是要加小括号的 --> <h2 class="title" :class="getClass()">{{message}}</h2> <button @click="btnClick">But</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: "Hello", isActive: true, isLine : true }, methods : { btnClick: function () { // 原来值的取反 = ! this.isActive = !this.isActive }, getClass: function () { return {'active': this.isActive, 'line': this.isLine} } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- <h2 class="title" :class="['active', 'line']">{{message}}</h2>--> <!-- // 替换页面上绑定的 class 参数 --> <!-- <h2 class="title" :class="[active, line]">{{message}}</h2>--> <h2 class="title" :class="getClass()"></h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: "Hello", active : 'aaaa', line: 'bbbb', }, methods: { getClass: function () { return [this.active, this.line] } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>V-bind V-for</title> </head> <style> .active { color: red; } </style> <body> <div id="app"> <ul> <li v-bind:class="{active:currentIndex === index}" v-for="(item, index) in moveis" @click="But(index)">{{item}}, {{index}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { moveis: ['海王', '海尔兄弟', '火影忍者'], currentIndex:0 }, methods: { But : function (index){ console.log(this.currentIndex) this.currentIndex=index }, getClass: function (index){ alert(index) return {'active': this.isActive, 'line': this.isLine} } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>V-bind Style</title> </head> <body> <div id="app"> <!-- <h1 :style="{fontSize:'100px'}"> {{message}} </h1>--> <!-- <h1 :style="{fontSize: fontSize}"> {{message}} </h1>--> <!-- <h1 :style="{fontSize: fontSize + 'px'}"> {{message}} </h1>--> <h1 :style="getStyle()"> {{message}} </h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: "Hello", // fontSize: '100px' fontSize: 100 }, methods : { getStyle: function (){ return {fontSize: this.fontSize + 'px'} } } }) </script> </body> </html>
