前言

Vue也学了好几章了,这次我们要自己来做一个demo,一个列表,能增删改查的东西,首先,我们得使用Bootstrap,这样好看,我到现在才终于明白了,所谓的好看就是Bootstrap的css,Bootstrap的表格,表单啥的都漂亮,美。而这些好看的表格,表单的交互,我们需要的是框架Vue。

讲真,Bootstrap的美观和Vue的不操作DOM搭配起来是真的爽啊,先看看效果图吧

Bootstrap插件下载

先下载一个Bootstrap的Snippets插件,这个可以帮我们快速的写Bootstrap,有3和4,我用的3版本

Bootstrap表格和面板

看着上面的效果图,我们要新建Bootstrap的面板和表格,这些东西,你在Bootstrap官网就可以找到全部的内容

安装了上面的Bootstrap3 Snippets插件之后

输入bs3-panel:primary 即可快速创建面板

输入bs3-table:bordered 即可快速创建表格,表格样式很多,可以去官网看看哪些喜欢就加上。

面板里面还要写一些input标签

增加数据,v-model和v-on

其实这个我们之前做过了,不就是两个input框,都使用了v-model指令,然后添加按钮使用了v-on指令绑定一个方法,方法内容也写过,就是简单的this.list.push

删除数据,事件修饰符和找索引的两种方法

删除数据,就是一个删除按钮,这里我使用了a标签,然后使用了.prevent事件修饰符让a标签的链接不起效,然后还有我为了美化删除按钮,用了Bootstrap的按钮css

删除数据的时候有一个需要注意的地方,就是你删除的是安装索引算的数据,item.id仅仅只是id,所以我们要根据id找索引,有两种方法

一个是some方法,some方法也是遍历,但是遇到true的时候可以停止,list列表的删除方法是splice

     this.list.some((item,i)=>{
if(item.id==id){
this.list.splice(i,1) //删除一个
return true
}
})

一个是js出的新方法,findIndex这个专门就是找索引的

       var index=this.list.findIndex(item=>{
if(item.id==id)
return true
})
this.list.splice(index,1)

查询数据,foreach和filter

查询数据这个,方法也有两个遍历和过滤

遍历到数据就添加进新的数组,返回

        var newlist=[]
this.list.forEach(item => {
if(item.name.indexOf(keywords)!=-1)
newlist.push(item)
});
return newlist

过滤

    return this.list.filter(item=>{
if(item.name.includes(keywords))
return item
})

全部的HTML

由于上面的都是分步骤加的HTML,所以我干脆上面讲核心思想,代码全部在这里贴出,这个可以直接复制粘贴使用了。注意看注释,注释都是需要看看的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜀云泉</title> <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
<link rel="stylesheet" href="../lib/bootstrap.css"> </head>
<body> <!-- 这个div就是MVVM中的V,View -->
<div id="app"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">蜀云泉的小列表</h3>
</div>
<!-- form-inline是文字和输入框在同一行显示,form-control是设置默认宽度width为100% -->
<div class="panel-body form-inline">
<label>
id:<input type="text" class="form-control" v-model="id">
</label>
<label>
name:<input type="text" class="form-control" v-model="name">
</label> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label>
查询:<input type="text" class="form-control" v-model="keywords">
</label> </div>
</div> <table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>creattime</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td v-text="item.id"></td>
<td v-text="item.name"></td>
<td v-text="item.creattime"></td>
<td><a href="" @click.prevent="del(item.id)" class="btn btn-danger">删除</a></td> </tr>
</tbody>
</table> </div> <script>
// 这个vm就是MVVM中的VM,ViewModel
var vm=new Vue({
el: '#app',
// 这个data就是MVVM中的M,Model
data: {
id:'',
name:'',
keywords:'',
list:[
{id:1,name:"蜀云泉",creattime:new Date().toLocaleString()},
{id:2,name:"许嵩",creattime:new Date().toLocaleString()}
]
},
methods: {
add(){
this.list.push({id:this.id,name:this.name,creattime:new Date().toLocaleString()})
},
del(id){
// 这里需要注意的是,我们删除id是不对的,因为索引是从0开始的,所以我们要通过id找到索引
// 通过id找到索引的方法有两种,我分别介绍一下
// 方法1:some方法
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1)
// return true
// }
// }) // 方法2:findindex方法
var index=this.list.findIndex(item=>{
if(item.id==id)
return true
})
this.list.splice(index,1) },
search(keywords){
// 查询方法也有两种,方法1
// var newlist=[]
// this.list.forEach(item => {
// if(item.name.indexOf(keywords)!=-1)
// newlist.push(item)
// });
// return newlist // 方法2
return this.list.filter(item=>{
if(item.name.includes(keywords))
return item
})
} } }) </script> </body>
</html>

防盗链接:本博客由蜀云泉发表

Vue学习笔记九:列表案例的更多相关文章

  1. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  2. Vue学习笔记-父子通信案例

    <div id="app"> <cpn :number1="num1" :number2="num2" @num1chan ...

  3. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  4. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  5. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  6. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  7. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

随机推荐

  1. MySQL 索引原理以及慢查询优化

    本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BTree ...

  2. 012——matlab判断变量是否存在

    (一)参考文献:https://www.ilovematlab.cn/thread-48319-1-1.html (二) clc clear a = exist('a') ans =1 clc cle ...

  3. VS - ActionFilterAttribute

    Global.asax.cs public class MvcApplication : System.Web.HttpApplication { public static void Registe ...

  4. DVWA-XSS练习

    本周学习内容: 1.学习web应用安全权威指南: 2.学习乌云漏洞: 实验内容: DVWA实验XSS跨站脚攻击 实验步骤: Low 1.打开DVWA,进入DVWA security模块,将难度修改为L ...

  5. snmp-trap

    snmpd作为一个服务,本身有系统的一些信息,外部可以通过snmp -get ,walk来获取,前提是被控主机开启了snmpd服务, snmptrap理解为一个陷阱,等着掉进来猎物,就是一个收数据的服 ...

  6. Pytest权威教程07-Monkeypatching,对模块和环境进行Mock

    目录 Monkeypatching,对模块和环境进行Mock 简单示例如: 猴子补丁方法 Monkeypatching 返回对象: 构建mock类 全局补丁示例如:阻止"requests&q ...

  7. docker技术入门(1)

    1Docker技术介绍 DOCKER是一个基于LXC技术之上构建的container容器引擎,通过内核虚拟化技术(namespace及cgroups)来提供容器的资源隔离与安全保障,KVM是通过硬件实 ...

  8. Spring Bean相关配置

    Bean相关配置 1.名称与标识 id 使用了约束中的唯一约束.里面不能出现特殊字符的 name 没有使用约束中的唯一约束.里面可以出现特殊字符. 设置对象的生命周期方法 init-method Be ...

  9. centos安装jdk1.8的三种方法

    一.手动解压安装包: 1.在user目录下新建java文件夹:   # cd /usr/   # mkdir java   # cd java 2.下载jdk1.8,进入http://www.orac ...

  10. java判断A字符串中是否包含B字符

    java.lang.String类提供的方法 public boolean contains(CharSequence s) 当且仅当此字符串包含指定的 char 值序列时,返回 true. 例如: ...