Vue教程07(综合小案例)

  本文我们通过一个小案例来巩固下前面讲的内容,具体案例效果如下:

Vue教程07(综合小案例)_第1张图片
其实也就是实现对表单数据的添加,删除和关键字查询的操作。

综合案例

1.页面布局

  页面布局我们通过bootstrap来快速实现,具体步骤如下

1.1 基础页面


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <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>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                
            }
        })
    script>
body>
html>

1.2 表单布局

  使用bootstrap来设置table,在vscode中安装bootstrap插件

Vue教程07(综合小案例)_第2张图片

先把这两个插件给装好,

Vue教程07(综合小案例)_第3张图片

然后准备数据

Vue教程07(综合小案例)_第4张图片

v-for使用

Vue教程07(综合小案例)_第5张图片

页面效果如下

Vue教程07(综合小案例)_第6张图片

1.3 头部样式

通过bootstrap来添加头部布局

Vue教程07(综合小案例)_第7张图片

Vue教程07(综合小案例)_第8张图片

添加对应的添加元素

<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" >
            label>
    
            <label>
            Name:
            <input type="text" class="form-control" >
            label>
    
            
            <input type="button" value="添加" class="btn btn-primary">
      div>
div>

Vue教程07(综合小案例)_第9张图片

2.添加记录

  通过点击‘添加按钮’将数据添加到table中
通过v-model指令将id和name输入框的信息和vm中的id和name绑定,

Vue教程07(综合小案例)_第10张图片
Vue教程07(综合小案例)_第11张图片

给"添加按钮"绑定点击事件

<input type="button" value="添加" class="btn btn-primary" @click='add'>

Vue教程07(综合小案例)_第12张图片

添加效果

Vue教程07(综合小案例)_第13张图片

添加后将输入框内容置空

Vue教程07(综合小案例)_第14张图片

3.删除记录

删除记录的实现逻辑:点击删除链接,获取要删除记录的id,然后调用数组的splice方法来移除记录,

Vue教程07(综合小案例)_第15张图片

注意:方法名称不要使用delete!

数组常用的循环方法比较

循环方法 说明
forEach 不可终止循环
some 返回true终止循环
findIndex 返回true可以终止循环,返回满足条件的索引
filter 过滤数组,返回过滤后的数组

通过数组的some方法来循环判断

Vue教程07(综合小案例)_第16张图片

或者通过findIndex方法来获取满足条件的下标,然后再删除数据:

Vue教程07(综合小案例)_第17张图片

删除效果

Vue教程07(综合小案例)_第18张图片

4.关键字查询

  关键字查询也就是根据用户的输入返回满足条件的信息,
添加搜索框

Vue教程07(综合小案例)_第19张图片
Vue教程07(综合小案例)_第20张图片

Vue教程07(综合小案例)_第21张图片

然后v-for中循环的信息就不能是直接操作list数据,而应该是调用方法返回的信息

Vue教程07(综合小案例)_第22张图片

添加search方法

Vue教程07(综合小案例)_第23张图片

通过foreach来实现效果

search(keywords){
  // 保存新的数组
   var newList = []
   this.list.forEach(item => {
       // 判断循环的记录是否包含的查询的关键字
       if(item.name.indexOf(keywords) != -1){
           // 将循环的记录添加到新的数组中
           newList.push(item)
       }
   })
   // 返回数组信息
   return newList
}

Vue教程07(综合小案例)_第24张图片

通过filter来实现效果

Vue教程07(综合小案例)_第25张图片

Vue教程07(综合小案例)_第26张图片

搞定!

数组常用的循环方法比较

循环方法 说明
forEach 不可终止循环
some 返回true终止循环
findIndex 返回true可以终止循环,返回满足条件的索引
filter 过滤数组,返回过滤后的数组

你可能感兴趣的:(Vue资料)