vue一个div默认只有一行数据点击按钮填充更多数据并且有向下展开的效果

可以使用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属性实现向下展开的效果