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

灰太狼 2023-02-14 15:47 10阅读 0赞

### 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

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

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