Vue.js 学习笔记（六）demo案例

奥妙无穹

已于 2022-03-01 08:41:46 修改

阅读量390

点赞数

分类专栏： Vue.js 文章标签： vue.js 学习 javascript

于 2022-03-01 08:41:33 首次发布

本文链接：https://blog.csdn.net/qq_44648936/article/details/123196933

版权

Vue.js 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一、代码（有一些准备工作，仔细看代码）

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入bootstrap，需要从官网bootcss.com中下载bootstrap文件，然后放入自己的项目中-->
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<div class="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2>图书管理系统</h2>
        </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">
        <thead>
        <tr>
            <th>id</th>
            <th>图书名称</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--注意key是item.id，所以如果添加重复id，会优先删除排在前面的元素-->
        <tr v-for="item in arr" :key="item.id">
            <td v-text="item.id"></td>
            <td v-text="item.name"></td>
            <td v-text="item.time"></td>
            <!--.prevent阻止a标签的默认刷新，以防止重新渲染数据-->
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var vm= new Vue({  //创建vue实例
        el:'.app',
        data:{
            arr:[
                {'id':1,'name':'三国演义','time':new Date()},
                {'id':2,'name':'红楼梦','time':new Date()},
                {'id':3,'name':'西游记','time':new Date()},
                {'id':4,'name':'水浒传','time':new Date()}
        ], //创建一些初始数据与格式
            id:'',
            name:''
        },
        methods: {
            //实现添加功能
            add() {
                //发现一个很有意思的事情，就是vue的js里加不加;都可以运行，而且不会报错
                //但是原生的js里就有可能报错，因为不加;系统就会把两行当做一行执行，所以建议还是加上;比较好
                this.arr.push({'id':this.id, 'name':this.name, 'time':new Date()});
                this.id = this.name = '';
            },
            //注意不能修改为delete(id),因为delete是js的关键字
            del(id){
                //findIndex方法查找索引，实现列表的删除功能
                var index=this.arr.findIndex(item=>{
                    if(item.id==id){
                        return true;
                    }
                });
                //splice(),第一个参数是要删除的索引，第二个参数是要删除元素的数量，但三个及以后的参数是要添加的元素
                this.arr.splice(index,1);
            }
        }
    })
</script>
</body>
</html>
</body>
</html>

二、效果截图

运行开始的效果
原来的样子
添加删除后
在这里插入图片描述

奥妙无穹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 学习笔记（六）demo案例

一、代码（有一些准备工作，仔细看代码）<!DOCTYPE html><html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsde
复制链接

扫一扫