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

最新推荐文章于 2023-05-20 09:33:14 发布

北辰Beichen

最新推荐文章于 2023-05-20 09:33:14 发布

阅读量2.7k

点赞数 4

分类专栏：不一样的前端文章标签： vue css

本文链接：https://blog.csdn.net/beichenxiansen/article/details/106528247

版权

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

摘要由CSDN通过智能技术生成

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=