#縮寫

1.v-blind ⇒為操作屬性用法

2.v-on ⇒事件綁定

v-on:click and v-on:keyup 事件綁定可以縮寫為 @click @keyup
v-blind:href 可以簡寫為 :href

#修飾符

1.常用的a連結取消a連結本身代有的行為,可以在

v-on:click.prevent   即可取消預設行為

#動態切換className

1.先綁定v-bind屬性

<div class="box" v-bind:class="{'要加入的className'  :  判斷式 }"></div>
<div class="box" v-bind:class="{ 'rotate' :   isTransform  }"></div>

2.利用點擊事件讓box翻轉45度

<button class="btn btn-outline-primary" @click="isTransform = true ">選轉物件</button>
<button class="btn btn-outline-primary" @click="isTransform = !isTransform ">選轉物件</button>

2021-12-25 23-46-52 的螢幕擷圖.png