vue中添加与删除，关键字搜索
<!DOCTYPE html>
<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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model='id'>
</label>
<label for="">Name:
<input type="text" v-model='name' @keyup.enter='add'>
</label>
<input type="button" value="添加" @click='addBtnFlag && add()'>
搜索：
<input type="text" v-model='keywords' id="search" v-focus v-color>
</div>
<!-- 注意： v-for 循环的时候 ， key 属性只能使用 number获取string -->
<!-- 注意：key 在使用的时候，必须使 v-bind 属性绑定的形式 指定 key 的值 -->
<!--在组件中，使用v-for循环的时候，或者在一些特殊的情况中，如果 v-for 有问题 ，必须 在使用 v-for 的同时 ，指定 唯一的字符串/数字 类型 :key 值 -->
<!-- v-for 中的数据，都是直接从 data 上的 list 中直接渲染过来的 -->
<!-- 自定义一个 search 方法，同时 ，把所有的关键词，通过传参的形式，传递给了 search 方法 -->
<!-- 在 search 方法内部，通过 执行 for 循环，把所有符合 搜索关键字的数据，保存到 一个新数组中 返回 -->
<p v-for='item in search(keywords)' :key="item.id">
<input type="checkbox">
{{item.id}}---- {{item.name}}
<!-- <a @click='shift(index)'>删除</a> -->
-----------------<a @click.prevent="del(item.id)">删除</a>
</p>
</div> <script>
//使用 Vue.directive() 定义全局的指令 v-focus
//其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀，
//但是：再调用的时候，必须 在指令名称前面 加上 v- 前缀来进行调用
//参数2：是一个对象，这个对象身上，有一些指令相关的函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
bind: function (el) {
//每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
//注意：在每个 函数中，第一个参数，永远是 el ， 表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的的JS对象
//在元素 刚绑定了指令的时候，还没有 插入到 DOM 中去，这时候，调用focus 方法没有作用
//因为，一个元素，只有插入DOM之后，才能获取焦点
el.focus()
},
inserted: function (el) {
//inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发一次】
el.focus()
},
updated: function (el) {
//当VNode更新的时候 会执行updated 可能会触发多次
},
}) Vue.directive('color',{
bind: function (el) {
el.style.color = 'red'
}
}) var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
keywords: '',//关键词
addBtnFlag:true,
list: [
{ id: 1, name: '奥迪' },
{ id: 2, name: '宝马' },
{ id: 3, name: '奔驰' },
{ id: 4, name: '玛莎拉蒂' },
{ id: 5, name: '保时捷' },
{ id: 6, name: '五菱宏光' }
] },
methods: {
add() { // this.list.push({ id: this.id, name: this.name }) if( this.id == ''){ this.addBtnFlag=false }else{ var car = { id: this.id, name: this.name }
this.list.push(car)
this.id = this.name = ''
} },
del(id) {
//根据ID删除
// this.list.some((item,i)=>{
// if(item.id == id){
// this.list.splice(i,1)
// 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 //注意：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 true
} })
// return newList } }
}) </script>
</body> </html>
vue中添加与删除，关键字搜索的更多相关文章
- JS-表格数据的添加与删除、搜索
<!doctype html><html><head><meta charset="utf-8"><title>JS练习 ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- 对List遍历过程中添加和删除的思考
对List遍历过程中添加和删除的思考 平时开发过程中,不少开发者都遇到过一个问题:在遍历集合的的过程中,进行add或者remove操作的时候,会出现2类错误,包括:java.util.Concurre ...
- vue中添加util公共方法&&ES6之import、export
vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...
- Vue实现添加、删除、关键字查询
从今天开始,将不定期更新关于 Vue 的学习以及各种方法的使用,好了,下面就开始吧 Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue,我为了省事就...),然后在HTML ...
- vue中使用some删除list中的数据
在vue中可以使用some方法查找需要删除的所以 this.list.some((item, i) => { if (item.id == id) { this.list.splice(i, 1 ...
- 怎样Zbrush 4R7中添加和删除SubTool
添加或删除SubTool在ZBrush®软件中是非常简单易操作的,通常在用SubTool面板已经给我们提供了相应的命令来对其进行操作,它能够将一个或多个格式为ZTL的文件同时添加进SubTool里. ...
- MySql中添加用户/删除用户
MySql中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束): 1.新建用户 登录MYSQL: @>mysql -u root -p @>密码 ...
- 在vue中添加sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...
随机推荐
- [django]update_or_create使用场景
update_or_create 作用是为了添加数据时防止重复. 先去查询, 如果没有在创建, 如果有则更新. update_or_create用法与密码存储实例 create方法 如果id是None ...
- 解决Mysql无法导入存在null数据的问题
其实很简单,在mysql的控制台输入 SET @@GLOBAL.sql_mode="NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION"; 然后重 ...
- 内存数据库：memcached与redis技术的对比试验
本文以高性能nginx服务器为应用背景,想利用缓存技术来减轻系统负荷,加快响应时间,从而增加web服务器的吞吐量. redis是一种分布式内存数据库,memcached是一种内存缓存技术,它们都采用k ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_3-01 什么是微服务的注册中心
笔记 第三章 SpringCloud核心组件注册中心 1.什么是微服务的注册中心 简介:讲解什么是注册中心,常用的注册中心有哪些 (画图) 理解注册中心:服务 ...
- pyqt5 工具栏文字图片同时显示
import sys from PyQt5.QtWidgets import QMainWindow, QTextEdit, QAction, QApplication from PyQt5.QtGu ...
- koa2-connect-history-api-fallback 使用
单页面应用程序(SPA)通常使用一个web浏览器可以访问的索引文件,比如index.html,然后,在HTML5 History API的帮助下(vue-router就是基于History API实现 ...
- nginx主配置文件实例
1.修改配置文件 重要:修改配置文件使用虚拟机,否则怎么配置都不生效,添加如下用户 [root@host-10-1-1-161 html]# ll /etc/nginx/nginx.conf -rw- ...
- Redis客户端基本操作以及查看慢查询
1.连接 redis-cli.exe -h 127.0.0.1 -p 6379 2.验证密码 λ redis-cli.exe -h 127.0.0.1 -p 6379127.0.0.1:6379> ...
- elasticsearch-head-master下运行npm install报npm WARN elasticsearch-head@0.0.0 license should be a valid SPDX license expression
2个月没有启动es和es配套服务,今天运行时,发现如下问题: 运行npm install 出现npm WARN elasticsearch-head@0.0.0 license should be a ...
- Centos7永久关闭防火墙
Centos7永久关闭防火墙 查看防火墙状态: systemctl status firewalld.service 绿的running表示防火墙开启 执行关闭命令: systemctl stop f ...