1.v-bind用來系結html中的屬性
注意：class系結多個屬性的時候用陣列<h3 :class="[h3Color,h3Width]">{{ h3 }}</h3>
并且如果用v-bind系結多個class只有第一個有效后面的無效
（可以在里面使用三元運算子或&&或||）
例如： <h3 :class="[h3Color,h3Width]" :class="h3Height">{{ h3 }}</h3>
除非不系結才有效 <h3 :class="[h3Color,h3Width]" class="h3Height">{{ h3 }}</h3>
注意：系結style的時候只能用物件或陣列不能直接寫上去同時系結兩個style和class一樣
例如： <h3 :style="{color:aa}">{{ h3 }}</h3>
<h3 :style="[{color:aa},bb]">{{ h3 }}</h3>
注意：若用物件表示則可設定這個屬性是否被使用true則使用false則不使用，也可陣列加物件聯合使用
<h3 :class="{height:h3True, red:h3True}">{{ h3 }}</h3>
<h3 :class="[h3Color,h3Width,{height:h3True}]">{{ h3 }}</h3>
注意：差值運算式不能寫在屬性上
例如： <img v-bind:src="https://bbs.csdn.net/topics/img" alt="">
可簡寫成：<img :src="https://bbs.csdn.net/topics/img" alt="">
2.v-on：監聽事件<button v-on:click="handleClick1">點擊</button> 可簡寫成@
<button @click="handleClick1">
注意：監聽的方法必須放到methods物件里面去
注意：console.log(event) event是事件物件 event.target點擊的物件
注意：$event表示事件物件 <button v-on:click="handleClick1（$event,2）">點擊</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><style> .red { color: red; background-color: rgba(0, 0, 0, 0.2); } .yellow { color: yellow; } .black { color: rgb(173, 125, 125); } .greed { color: green; } .width { width: 300px; } .height { height: 200px; }</style> <div id="div"> <img v-bind:src="https://bbs.csdn.net/topics/img" alt="" width="100" height="100"> <h3 :class="[h3Color,h3Width]">{{ h3 }}</h3> <h3 :class="{height:h3True, red:h3True}">{{ h3 }}</h3> <h3 :class="{height:h3False, red:h3True}">{{ h3 }}</h3> <h3 :class="[h3Color,h3Width,{height:h3True}]">{{ h3 }}</h3> <h3 :style="{color:aa}">{{ h3 }}</h3> <h3 :style="[{color:aa},bb]">{{ h3 }}</h3> <button v-on:click="handleClick1">點擊</button> <h3 :class="h4ClassArr[h4Index]">{{ h3 }}</h3> </div> <script> const vd = new Vue({ el: '#div', data: { img: './0272ca245fe80ddd8a0f05aba56b8e97.jpg', h3: '你好呀！', h3Color: 'red', h3Width: 'width', h3Height: 'height', h3True: true, h3False: false, aa: 'yellow', bb: { backgroundColor: 'black' }, h4ClassArr: ['greed', 'yellow', 'black'], h4Index: 0, count: 0, }, methods: { handleClick1() { console.log(event) console.log(event.target) this.h4Index = ++this.count % 3; } } }); </script>
注意： <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><style> .yellow { color: yellow; } .black { color: rgb(173, 125, 125); } .greed { color: green; }</style><div id="div"> <button v-on:click="handleClick1">點擊</button> <h3 :class="h4ClassArr[h4Index]">{{ h3 }}</h3> </div> <script> const vd = new Vue({ el: '#div', data: { h4ClassArr: ['greed', 'yellow', 'black'], h4Index: 0, count: 0, }, methods: { handleClick1(e) { //console.log(e)==console.log(event) console.log(e) this.h4Index = ++this.count % 3; } } }); </script>
注意： <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><style> .yellow { color: yellow; } .black { color: rgb(173, 125, 125); } .greed { color: green; }</style><div id="div"> <button v-on:click="handleClick1(1)">點擊</button> <h3 :class="h4ClassArr[h4Index]">{{ h3 }}</h3> </div> <script> const vd = new Vue({ el: '#div', data: { h4ClassArr: ['greed', 'yellow', 'black'], h4Index: 0, count: 0, }, methods: { handleClick1(e) { //如果上面傳個引數e就代表引數了 console.log(e) this.h4Index = ++this.count % 3; } } }); </script>
注意： <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><style> .yellow { color: yellow; } .black { color: rgb(173, 125, 125); } .greed { color: green; }</style><div id="div"> <button v-on:click="handleClick1($event,1)">點擊</button> <h3 :class="h4ClassArr[h4Index]">{{ h3 }}</h3> </div> <script> const vd = new Vue({ el: '#div', data: { h4ClassArr: ['greed', 'yellow', 'black'], h4Index: 0, count: 0, }, methods: { handleClick1(e,num) { //$event表示事件物件 console.log(e) this.h4Index = ++this.count % 3; } } }); </script>
注意:也可以吧handleClick1放到data里面去但this指的就不在是vd物件而是Windows物件了，所以要把this改成vd <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><style> .yellow { color: yellow; } .black { color: rgb(173, 125, 125); } .greed { color: green; }</style><div id="div"> <button v-on:click="handleClick1">點擊</button> <h3 :class="h4ClassArr[h4Index]">{{ h3 }}</h3> </div> <script> const vd = new Vue({ el: '#div', data: { h4ClassArr: ['greed', 'yellow', 'black'], h4Index: 0, count: 0, handleClick1() { console.log(e) vd.h4Index = ++vd.count % 3; } }, }); </script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/114106.html
標籤：JavaScript
上一篇：v8引擎如何查看機器碼
下一篇：vue框架分頁