v-bind介绍
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><!-- 錯誤的做法: 這里不可以使用mustache語法--><!--<img src="{{imgURL}}" alt="">--><!-- 正確的做法: 使用v-bind指令 --><img v-bind:src="imgURL" alt=""><a v-bind:href="aHref">百度一下</a><!--語法糖的寫法--><img :src="imgURL" alt=""><a :href="aHref">百度一下</a> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: '你好啊',imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',aHref: 'http://www.baidu.com'}}) </script></body> </html>
v-bind綁定class
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.active {color: red;}</style> </head> <body><div id="app"><!--<h2 class="active">{{message}}</h2>--><!--<h2 :class="active">{{message}}</h2>--><!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>--><!--<h2 v-bind:class="{類名1: true, 類名2: boolean}">{{message}}</h2>--><h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2><h2 class="title" v-bind:class="getClasses()">{{message}}</h2><button v-on:click="btnClick">按鈕</button> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: '你好啊',isActive: true,isLine: true},methods: {btnClick: function () {this.isActive = !this.isActive},getClasses: 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><h2 class="title" :class="getClasses()">{{message}}</h2> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: '你好啊',active: 'aaaaaa',line: 'bbbbbbb'},methods: {getClasses: function () {return [this.active, this.line]}}}) </script></body> </html>
總結
- 上一篇： v-pre的指令|| v-cloak 的
- 下一篇： let/var的使用详解