Vue.js 实现点击按钮展开更多数据 - 带动画效果

可以使用 Vue 的 v-if 和 v-for 指令，以及 CSS 的 transition 属性来实现这个效果。

HTML 代码：

<div id='app'>
  <div class='content'>
    <div class='item' v-for='item in items' :key='item'>{{ item }}</div>
    <button @click='addMore'>更多</button>
  </div>
</div>

CSS 代码：

.content {
  max-height: 50px;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.content.open {
  max-height: 300px;
}

JavaScript 代码：

new Vue({
  el: '#app',
  data: {
    items: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10']
  },
  methods: {
    addMore() {
      this.items.push('更多数据');
      if (this.items.length > 10) {
        this.$el.querySelector('.content').classList.add('open');
      }
    }
  }
})

在初始状态下，内容区域的高度设置为 50px，并且超出部分隐藏。点击按钮添加更多数据，当数据数量大于 10 时，通过 JavaScript 代码给内容区域添加 open 类，通过 CSS 的 transition 属性实现向下展开的效果。