-- 新增jquery

yarn add jquery 

--新增jquery程式碼提示

yarn add @types/jquery

 --匯入jquery

import $ from 'jquery' 

//  普通的dom元素
<div class="message_content"
     ref="message_content_ref">
      // content .....  
      </div>
<script>
export default {
  name: 'collapseM',
  props: {
  },
  data () {
    return {
      isContentShow: false
    }
  },
  methods: {
    colToggle () {
      let self = this
      console.log(this.$refs.message_content_ref)
      // 實現普通下滑動畫
      $(this.$refs.message_content_ref).slideToggle(function () {
        self.isContentShow = !self.isContentShow
      })
    }
  },
  created () {

  },
  computed: {
  },
  watch: {

  },
  mounted () {
  }
}
</script>
 

傳統用jquery是通過 id 或者 class 直接操作 dom ，但是 class 那樣在vue元件裡面會造成所有相同元件的動畫汙染，id肯定不可取

通過給元素設定refs 然後再通過jquery 去操作通過refs獲取到的dom 實現每個元件自己內部的動畫