Vue学习day06--v-for商品添加、删除案例

最新推荐文章于 2023-08-03 21:27:18 发布

不熬夜的程序猿

最新推荐文章于 2023-08-03 21:27:18 发布

阅读量259

点赞数

分类专栏： vue.js学习

本文链接：https://blog.csdn.net/No_overtime_apes/article/details/105336126

版权

vue.js学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1、案例中使用bootstrap.css快速添加样式。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue学习day05</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap.min.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!--敲入命令 npm install babel-core@5 引入 babel(es6的翻译器)-->
    <script src="./node_modules/babel-core/browser.min.js">
    </script>
<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>
                    ID
                    <!--<input type="text" class="form-control" v-model="id">-->
                </label>
                <label>
                    商品
                    <!--<input type="text" class="form-control"  v-model="name">-->
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>商品</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td >{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                    <!--不刷新页面prevent-->
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            id:"",
            name:"",
            data: {
                list:[
                    {id:1,name:"ipad平板",ctime:new Date()},
                    {id:2,name:"联想笔记本",ctime:new Date()},
                    {id:3,name:"华为P40",ctime:new Date()},
                ]
            },
            methods:{
                    //添加
                add:function () {
                    var goods={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(goods);
                    this.id=this.name="";
                },
                   //删除
                del:function (id) {
                    var index = this.list.findIndex(function (item,i) {
                        if(id == item.id){
                            console.log(i)
                            return true;}
                    });
                    this.list.splice(index,1);
                }
            }
        });
    </script>
</body>
</html>

2、效果图：

不熬夜的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习day06--v-for商品添加、删除案例

1、案例中使用bootstrap.css快速添加样式。<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-...
复制链接

扫一扫

专栏目录