Vue实战小案例

最新推荐文章于 2025-04-11 22:58:21 发布

bugsayend

最新推荐文章于 2025-04-11 22:58:21 发布

阅读量2k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_42707967/article/details/115799818

版权

本文通过一个Vue实战案例，详细介绍了如何实现表格数据的添加、删除和搜索功能，以及在Vue中如何进行父组件与子组件间的双向数据绑定。案例以购物车效果为示例，展示了具体的代码实现和最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.表格数据添加，删除，搜索功能

第一个小案例我们模拟购物车效果，实现表格中数据添加，删除，以及搜索功能，废话不多说，直接上代码

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewpot" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue实现购物车功能</title>
        <script src='./Vue.js'></script>
        <style>
            * {
    
                margin: 0;
                padding: 0;
            }
            #container {
    
                margin: 0 auto;
                width:60%;
                margin-top:10px;
            }
            .boxOne {
    
                width:100%;
                height:40px;
                border:1px solid #000;
                box-sizing: border-box;
                position: relative;
            }
            #goods tr{
    
                height:35px;
            }
            #goods tr>th{
    
                background-color: #0094ff;
                font-size:16px;
            }
            .boxOne span {
    
                position: absolute;
                top:50%;
                left:0;
                transform: translate(0,-50%);
            }
            #goods {
    
                border-collapse:collapse;
                border: 1px solid #000;
                text-align: center;
                width:100%;
                margin-top:10px;
            }
            th, td {
    
                border-collapse:collapse;
                border: 1px solid #000;
            }
            #addGood {
    
                padding: 0 5px;
            }
            #searchTag {
    
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="shop">
            <div id="container">
                <div id="addTag" class="boxOne">
                    <span>
                        <label for="add">品牌名称：</label

最低0.47元/天解锁文章