vue点击按钮实现添加组件（内容--类似于添加购物车效果）

vue点击按钮添加组件，类似于添加购物车效果。

首先在template里

<template>
  <div class="hello">
    <header>
      <div>
        <input type="text" v-model="child" />
        <button @click="addChild">点击添加儿童</button>
      </div>
      <div>
        <input type="text" v-model="man" />
        <button @click="addMan">点击添加成人</button>
      </div>
      <div>
        <input type="text" v-model="old" />
        <button @click="addOld">点击添加老人</button>
      </div>
    </header>

    <section>
      <ul>
        <template v-for="(item,index) in list">
          <span :key="index" v-if="item.type === 'child'">
            <p>车票 + 儿童票</p>
            <label for="">姓名：<input type="text"></label>
            <br>
            <label for="">手机号：<input type="text"></label>
            <br>
            <label for="">身份证：<input type="text"></label>
          </span>
          <span :key="index" v-else-if="item.type === 'man'">
            <p>车票 + 成人票</p>
            <label for="">姓名：<input type="text"></label>
            <br>
            <label for="">手机号：<input type="text"></label>
            <br>
            <label for="">身份证：<input type="text"></label>
          </span>
          <span :key="index" v-else>
            <p>车票 + 老人票</p>
            <label for="">姓名：<input type="text"></label>
            <br>
            <label for="">手机号：<input type="text"></label>
            <br>
            <label for="">身份证：<input type="text"></label>
          </span>
        </template>
      </ul>
    </section>
  </div>
</template>

然后是script

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      child: 0,
      man: 0,
      old: 0,
      list: []
    }
  },
  methods: {
    addChild() {
      this.child++
      this.list.push({
        type: 'child'
      })
    },
    addMan() {
      this.man++
      this.list.push({
        type: 'man'
      })
    },
    addOld() {
      this.old++
      this.list.push({
        type: 'old'
      })
    }
  }
}
</script>

最后呢也就是一个简易的样式

<style scoped>
header div {
  margin-top: 20px;
}
</style>

样式呢，自己调就好了。效果图是静态的我就不上传了，感兴趣的朋友可以运行起来看效果。