vue实现简单的列表展现、增加、删除、搜索

最新推荐文章于 2024-05-24 17:11:08 发布

全职计算机毕业设计

最新推荐文章于 2024-05-24 17:11:08 发布

阅读量7.2k

点赞数 2

分类专栏： vue 文章标签： CRUD

本文链接：https://blog.csdn.net/qq_31293575/article/details/81134794

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
    <!--容器-->
    <div id="app">
        <h1>添加</h1>
        <span>id:</span>
        <input type="text" v-model="id">
        <span>name:</span>
        <input type="text" v-model="name">
        <input type="button" @click="add" value="添加">
        搜索关键字：
        <input type="text" v-model="keywords">
<br><hr>
        <li v-for="i of search(keywords)">
            {{i.id}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{i.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" @click.prevent="del(i.id)">删除</a>
        </li>

    </div>

<script>
    // 创建一个vue实例
    var vm=new Vue({
        el:'#app',  // 绑定id为appid容器
        data:{
            id:"",
            name:"",
            keywords:"",
            list:[
                {id:1,name:"宝马"},
                {id:2,name:"奔驰"}
            ]
        },
        methods:{
            add(){
                var item={id:this.id,name:this.name};
                this.list.push(item);
                this.id="";
                this.name="";
            },
            del(id){
                _this=this;
                this.list.some(function (item,index) {
                    if(item.id==id){
                        _this.list.splice(index,1);
                        return true;
                    }
                })
            },
            search(keywords) { // 根据关键字，进行数据的搜索
                /* var newList = []
                this.list.forEach(item => {
                  if (item.name.indexOf(keywords) != -1) {
                    newList.push(item)
                  }
                })
                return newList */

                // 注意：  forEach   some   filter   findIndex   这些都属于数组的新方法，
                //  都会对数组中的每一项，进行遍历，执行相关的操作；
                return this.list.filter(item => {
                    // if(item.name.indexOf(keywords) != -1)

                    // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
                    //  如果包含，则返回 true ，否则返回 false
                    //  contain
                    if (item.name.includes(keywords)) {
                    return item
                }
            });

                // return newList
            }
        }
    })
</script>
</body>
</html>

效果：

完整原文：http://blog.maptoface.com/post/95

全职计算机毕业设计

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
7
评论
vue实现简单的列表展现、增加、删除、搜索

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script></head><body> ...
复制链接

扫一扫