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

最新推荐文章于 2024-03-07 16:20:55 发布

原创最新推荐文章于 2024-03-07 16:20:55 发布 · 2.8k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

不一样的前端

本文介绍了如何使用Vue.js实现一个功能，即点击按钮动态地添加组件，该效果类似于购物车的添加功能。在模板部分设置好结构，接着在script中编写逻辑，最后通过简单的CSS调整样式。虽然未提供实际效果图，但鼓励读者自行运行代码查看效果。

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>

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

标签

#vue #css