input框里面的数值动态生成列表

当我要达到下面这种效果用什么会好一些，可以又时间轴吗，如果用时间轴应该怎么实现呢

<template>
  <div>
    <el-input-number v-model="value" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
    <el-timeline>
      <el-timeline-item>房屋基本信息</el-timeline-item>
        <el-timeline-item
          v-for="(item, index) in list"
          :key="index">
          {{item}}{{index+1}}
        </el-timeline-item>
      </el-timeline>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        value: 3,
        list: []
      }
    },
    created () {
      for (let i = 0; i < this.value; i++) {
        this.list.push('被征收房屋')
      }
    },
    methods: {
      handleChange () {
        this.list = []
        for (let i = 0; i < this.value; i++) {
          this.list.push('被征收房屋')
        }
      }
    }
  }
</script>

用的什么ui框架呢，应该每个里面都有步骤条，你可以使用纵向步骤条，检测“加号”按钮事件然后对步骤条的list进行操作就行

最好自己写一个这样的组件吧，不难的

可以用时间轴，例如element ui的时间轴，换成其他的也同理
只要把时间轴的子项用v-for渲染，然后根据input输入的值进行渲染显示就行
然后改改样式
例如:

data() {
  return{
     num: 3   //你输入框双向绑定的值
  }
}

//然后
<el-timeline :reverse="reverse">
  <el-timeline-item>房屋基本信息</el-timeline-item>
    <el-timeline-item
      v-for="(activity, index) in num"
      :key="index">
      被征收房屋{{activity}}
    </el-timeline-item>
  </el-timeline>

如有帮助，麻烦点个【采纳此答案】 谢谢啦~