vue 學習

滑鼠事件

 @mouseenter="mouseEnter(index) " @mouseleave="mouseLeave(index)"
 @click='函式'
 @mouseover='函式'複製程式碼

css過度動畫

單元素/元件的過度

Vue 提供了 transition 的封裝元件，在下列情形中，可以給任何元素和元件新增進入/離開過渡

• 條件渲染 (使用 v-if)
• 條件展示 (使用 v-show)
• 動態元件
• 元件根節點

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
複製程式碼

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
複製程式碼

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
複製程式碼