开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue列表操作实战——品牌管理系统(v1.0基础版)

简介: Vue列表操作实战——品牌管理系统(v1.0基础版)
+关注继续查看

展示


image


(视频中有个删除不了的bug,代码已经改正,视频没录未更新)


讲解


根据条件筛选品牌


search 过滤方法中,使用 数组filter 方法进行过滤:


search(name) {
  return this.list.filter(x => {
    return x.name.indexOf(name) != -1;
  });
}


全部代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表案例</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>
                    id:
                    <input type="text" class="form-control" id="" 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>ctime</th>
                    <th>operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td v-text="item.name"></td>
                    <td>{{ item.ctime }}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 创建vue 实例 得到viewmodel
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list: [
                  { id: 1, name: '奔驰', ctime: new Date() },
                  { id: 2, name: '宝马', ctime: new Date() }
                ]
            },
            methods:{
                // 添加信息的方法
                add(){
                    // 1. 获取到 id 和 name ,直接从 data 上面获取 
                    // 2. 组织出一个对象
                    // 3. 把这个对象,调用 数组的 相关方法,添加到 当前 data 上的 list 中
                    // 4. 注意:在Vue中,已经实现了数据的双向绑定,每当我们修改了 data 中的数据,Vue会默认监听到数据的改动,自动把最新的数据,应用到页面上;
                    var car={id:this.id,name:this.name,ctime: new Date()};
                    this.list.push(car);
                    this.id=this.name='';
                },
                // 根据Id删除数据
                del(id){

                    /* this.list.some((item, i) => {
                      if (item.id == id) {
                        this.list.splice(i, 1)
                        // 在 数组的 some 方法中,如果 return true,就会立即终止这个数组的后续循环
                        return true;
                      }
                    }) */
                    var index = this.list.findIndex(item=>{
                        if (item.id == id) {
                            return true;
                        }
                    });

                    this.list.splice(index,1);
                },
                // 根据关键字进行查找(因为是双向绑定,直接查找即可)
                search(keywords){
                    /* var newList = []
                    this.list.forEach(item => {
                      if (item.name.indexOf(keywords) != -1) {
                        newList.push(item)
                      }
                    })
                    return newList */
                    
                    return this.list.filter(item=>{
                        // 注意 : ES6中,为字符串提供了一个新方法,叫做  String.prototype.includes('要包含的字符串')
                        //  如果包含,则返回 true ,否则返回 false
                        if (item.name.includes(keywords)) {
                            return item;
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于springboot实现快递代取管理系统
本项目基于springboot框架开发而成,前端采用bootstrap和layer框架开发,系统功能完整,界面简洁大方,比较适合做毕业设计使用。 本项目主要实现了代取快递的信息管理功能,使用角色有三类:一是客户可以直接访问系统下单,输入代取快递的相关信息,并可以在系统中查询订单的完成进度,也可以对系统进行相应的反馈并查询反馈的回复情况。也可以直接在线支付代取费用。二是接单员,可以登陆系统进行接单,并根据自己的订单完成情况修改订单状态,查询自己的订单等。三是系统管理员,可以实现对人员和订单信息的管理,对反馈信息的回复等操作。
34 0
S3C2440对Nand Flash操作和电路原理(基于K9F2G08U0A)
S3C2440内部集成了一个Nand flash控制器。S3C2440的Nand flash控制器包含了如下的特性: l        一个引导启动单元 l        Nand Flash存储器接口,支持8位或16位的每页大小为256字,512字节,1K字和2K字节的Nand flash l        软件模式:用户可以直接访问Nand Flash存储器,此特性可以用于Nand Flash存储器的读、擦除和编程。
1095 0
SA实战 ·《SpringCloud Alibaba实战》第26章-专栏总结与后续规划
一不小心《SpringCloud Alibaba实战》专栏都更新完了,再不上车就跟不上了,小伙伴们快跟上啊!
33 0
基于Springboot实现养老院管理系统
目前,中国已成为世界上老年人口最多的国家,人口老龄化问题较为严重;但是,传统的养老院存在管理模式过于老套落后,老人信息管理不够便捷、护工人员管理不够高效等问题。针对以上问题,系统设计并实现了一个养老院老人信息管理系统。其主要的功能模块包括:用户管理、健康管理、生活管理、安全管理、收费管理等几大模块。该系统基于三层架构设计,利用html进行前端页面开发,选用MySQL 关系数据库进行数据存储,最后使用SSM框架整合。系统能够为养老院提供管理员、老人多用户功能。系统测试表明,各功能模块均达到了预期的目标。系统在满足基本的使用功能上,还增加了人机交互的一些特色功能,比如查询数据的导出、数据的在线打印
56 0
新书上架:《Spring Boot 开发实战》基于 Kotlin + Gradle + Spring Boot 2.0 的企业级服务端开发实战
《Spring Boot 开发实战》 — 基于 Kotlin + Gradle + Spring Boot 2.0 的企业级服务端开发实战
4174 0
新书上架:《Spring Boot 开发实战》(基于 Kotlin + Gradle + Spring Boot 2.0 的企业级服务端开发实战)
新书上架:《Spring Boot 开发实战》 — 基于 Kotlin + Gradle + Spring Boot 2.0 的企业级服务端开发实战 京东下单链接 https://item.
3667 0
SpringCloud微服务实战——搭建企业级开发框架(九):使用Nacos发现、配置和管理微服务
Nacos是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台,Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现、服务配置、服务元数据及流量管理。Nacos部署请参考Nacos安装指南:https://www.jianshu.com/p/2e065c15d730
40 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载