• vue-2.1-品牌案例的添加、删除、和搜索功能


    <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>Document</title>
        <script src="../lib/vue.min.js"></script>
        <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <!--https://files.cnblogs.com/files/cgy-home/bootstrap.min.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" v-model="id"> </label> <label> Name: <input type="text" class="form-control" v-model="name"> </label> <label> 搜索名称关键字: <input type="text" class="form-control" v-model="keywords"> </label> <!-- 在Vue中,使用事件绑定事件,加小括号可以传入参数--> <input type="button" value="添加" class="btn btn-primary" @click="add"> </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> <!--之前,v-for 中的数据,都是直接从 data 上的list中直接渲染过来的--> <!--现在,我们自定义了一个search方法,同时,把 所有的关键字,通过传参的形式,传递给了search方法--> <!--在search方法内部,通过 执行 for 循环,把所有符合搜索关键字的数据,保存到一个新的数组中,返回--> <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> var vm = new Vue({ el: '#app', data: { id:"", name:"", keywords:"", list: [ {id: 1, name: '奔驰', ctime: new Date()}, {id: 2, name: '宝马', ctime: new Date()}, {id: 3, name: '奥迪', ctime: new Date()}, {id: 4, name: '林肯', ctime: new Date()}, ] }, methods: { add() { // 添加的方法 // 分析: // 1. 获取到 id 和 name ,直接从 data 上面获取 // 2. 组织出一个对象 // 3. 把这个对象,调用 数组的 相关方法,添加到 当前 data 上的 list 中 // 4. 注意:在Vue中,已经实现了数据的双向绑定,每当我们修改了 data 中的数据,Vue 会默认监听到数据的改动,自动把最新的数据,应用到页面上; // 5. 我们更多的是进行 VM 中 Model 数据的操作,同时,在操作 Model 数据的时候,制定的业务逻辑操作; var car = {id:this.id, name:this.name, ctime:new Date()}; this.list.push(car) this.id = this.name = "" }, del(id) { // 根据Id 删除数据 // 分析: // 1. 如何根据Id ,找到要删除这一项的索引 // 2. 如果找到索引了,直接调用 数组的splice方法 /*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 => { /*if (item.name.indexOf(keywords) != -1)*/ // 注意: ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串') // 如果包含,则返回 true ,否则返回 false if (item.name.includes(keywords)){ return item; } }) } } }) // 过滤器的定义语法 // Vue.filter('过滤器的名称', funciton(){}) // 过滤器中的function ,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据 /*Vue.filter('过滤器名称', function(data) { return data + '123' }*/ </script> </body>
  • 相关阅读:
    ASP.NET HTTP模块和处理程序(5)(转载)
    充分利用ASP.NET的三种缓存提高站点性能(转载)
    LINQ体验(4)——LINQ简介和LINQ to SQL语句之Where
    理解DataSet的数据缓存机制
    在ASP.NET中实现AJAX(一)
    ASP.NET HTTP模块和处理程序(2)(转载)
    ASP.NET HTTP模块和处理程序(1)(转载)
    aspx页面中文汉字显示为乱码
    贫血还是充血?(转载)
    ASP.NET HTTP模块和处理程序(3)(转载)
  • 原文地址:https://www.cnblogs.com/cgy-home/p/11326158.html
Copyright © 2020-2023  润新知