Vue-商品案例的增删查

最新推荐文章于 2022-06-05 13:18:20 发布

ALI_SAf

最新推荐文章于 2022-06-05 13:18:20 发布

阅读量184

点赞数

分类专栏： vue 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/ALI_SAf/article/details/120621543

版权

本文分析了Vue中商品管理的功能实现，包括使用click事件进行商品添加，数据存储在data中，利用v-for遍历和push()方法添加数据。探讨了删除操作，结合click和splice()方法来移除数组元素。详细讲解了商品案例的具体代码，并介绍了搜索功能，涉及forEach、some、filter、findIndex等数组新方法和String.prototype.includes()用于搜索字符串。

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

添加（分析）

商品的添加需要用到click事件
数据提供的位置在data里面
使用v-for遍历出数据
push()获取添加的数据

删除（分析）

在v-for遍历数组的基础上使用click方法
删除数组的方法splice()

商品案例具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline" >
                <label for="">
                    id:
                    <input type="text" v-model="id">
                </label>
                <label for="">
                    Name:
                    <input type="text" name="" id="" v-model="name">
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
            </div>
        </div>
        <table class="table table-bordered table-hovet table-scriped">
            <thead>
                <tr>
                    <th>id</th>
                    <th&g