Vue 實現點擊展開收起

Vue 展開收起功能實現

之前寫項目的時候提到了一個需求 展開/收起 所有內容的需求 。因之前一值是重構，自己寫功能還是比較少的，於是網上搜了一下，發現很多東西其實是jq的功能 雖然可以拿過來用，但是還是想使用vue 寫出原汁原味的模塊

  demo: 
<div :class="is_show ? 'new_detail' : 'work_detail'">
      <!-- 這里是操作的div 包含的文字 -->
      <!-- 這里的is——show 就是true/false -->
             <!-- // 先通過綁定class 來判斷 是顯示所有內容的樣式 還是隱藏部分樣式 -->
       </div>
        <span class="open" @click="is_show=!is_show">
        {{word}}
        <!-- 點擊事件控制 class綁定所依賴的判斷條件 -->
        <!-- 此時的word就是計算屬性的結果 -->
        </span>
<!-- 計算屬性 -->

computed: {
    // 項目內容
    word() {
      if (this.is_show === false) {
        return '展開'
      } else if (this.is_show === true) {
        return '收起'
      } else if (this.is_show === '') {
        return null
      }
    },

總體來說這個是個偽代碼 但是實現程度已經是非常高了 基本符合vue的實現思路

求點贊