[Vuejs]-Show more / less button with transition

you should be create an array to store active items.

new Vue({
  el: '#app',
  data() {
    return {
      showMores: [],
      items: [
        {id: 21, content: 'test<br>hellow<br>world'}
      ]
    }
  },
  methods: {
    showMore(item) {
      if(this.showMores.indexOf(item.id)===-1) {
        this.showMores.push(item.id)
      } else {
        this.showMores.splice(this.showMores.indexOf(item.id), 1)
      }
    }
  }
})

.item {height: 22px; overflow: hidden; line-height: 20px}
.item.more {height: auto}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="content">
    <div class="item" :class="{more: (showMores.indexOf(item.id)!==-1)}" v-for="item in items">
      <button @click="showMore(item)">More</button><span v-html="item.content"></span>
    </div>
  </div>
</div>

    

    new Vue({
        el: '#app',
        data() {
          return {
            isshow:true,
            items: [
              {id: 21, content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ex quisquam aperiam si delectus molestias fugit  dolores animi excepturi necessitatibus'}
            ]
          }
        },
        methods: {
          showMore() {
            this.isshow = !this.isshow
          }
        }
      })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 
 <div id="app">
        <p v-if=isshow>{{items[0].content.substr(0, 20)}} <button @click="showMore()">Read more</button></p>
        <p v-else>{{items[0].content}}  <button @click="showMore()">Show less</button></p>
        </div>
    </div>

I hope this will work for you. Now you can play with this logic. Or you can share your code what you have tried.

new Vue({
  el: "#app",
  data: {
    showAlert : false,
  },
  computed : {
    text () {
        return this.showAlert ? "Hide" : "Show";
    }
  },
  methods: {
    toggle: function(){
        this.showAlert = !this.showAlert;
    }
  }
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="app">
  <button class="btn btn-info" @click="toggle">
    {{text}}
  </button>
  <transition name="slide">
    <div class="mt-4" v-if="showAlert">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </transition>
</div>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.slide-enter-active {
  animation: slide-in 1s ease-out forwards;
}

.slide-leave-active {
  animation: slide-out 1s ease-out forwards;
}

@keyframes slide-in {
  from {
    transform: translateY(50px);
    opacity: 1;
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(50px);
    opacity: 0;
  }
}

See the above snippet if this serves your purpose or not.

my js fiddle : https://jsfiddle.net/shubhambattoo/god4se5k/6/

you can read about transitions in vuejs : https://v2.vuejs.org/v2/guide/transitions.html