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

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

qq_31293575

7339人浏览 · 2018-07-20 16:35:28

qq_31293575 · 2018-07-20 16:35:28 发布

<!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

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^