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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="vue.js"></script>
<title>Document</title>
</head>
<body>
<!-- v-bind 属性绑定 -->
<!-- v-on 事件绑定事件 -->
<div id="app">
<!-- <p>{{ message }}</p> -->
<!-- <input type="button" value="按钮" :title="misss" @click="show"> --> <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:
<!-- @keyup.enter针对键盘事件的 -->
<input type="text" class="form-control" v-model="name" @keyup.f2 ='add'>
</label>
<input type="button" value="添加" class="btn btn-primary" @click='add'>
<label>
搜索关键字:
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'green'">
</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,index) in seach(keywords)" :key='item.id'>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.time | times }}</td>
<td>
<a href="" @click.prevent='del(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table> </div>
</body>
<script>
//全局过滤器
//padStart是es6中的填充字符串
Vue.filter('times', function(data, quanstime=''){
let ds = new Date(data) var y = ds.getFullYear()
var m = (ds.getMonth() + 1).toString().padStart(2,'0')
var d = ds.getDate().toString().padStart(2,'0') //toLowerCase把所有的字符串转化成小写
if(quanstime.toLowerCase()=== 'yyyy-mm-dd'){
return `${y}-${m}-${d}` }else{
var hh = ds.getHours().toString().padStart(2,'0')
var mm = ds.getMinutes().toString().padStart(2,'0')
var ss = ds.getSeconds().toString().padStart(2,'0') return `${y}-${m}-${d} ${hh}:${mm}:${ss}` }
}) //自定义键盘码 Vue.config.keyCodes
Vue.config.keyCodes.f2 = 113 //自定义全局指令指令 Vue.directive()是自定义指令的方法
//参数一：是指令名称，
//参数二：是一个对象，这个对象身上，有一些指令的相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
// 每当指令绑定到元素上的时候，会立即执行这个bind的函数，只执行一次
bind: function(){ },
// 表示元素插入到DOM中的时候，会执行inserted函数
inserted:function(el){ el.focus()
},
// 当VNode更新的时候，会执行updated，可能触发多次
updated:function() { },
}) //修改输入框的颜色
Vue.directive('color',{
bind:function(el, binding){
el.style.color = binding.value
}
}) new Vue({
el:'#app',
data:{
id:"",
name:"",
// message:"woaini",
// misss:"点一点",
keywords:'',
list:[
{id:1,name:'宝马',time: new Date() },
{id:2,name:'奔驰',time: new Date() }
], },
methods: {
// 添加
add(){ let car = {id:this.id, name:this.name,time:new Date()}
if(this.id != 0 || this.name != 0){
this.list.push(car)
} },
// 删除
// del(id){
// this.list.some((item, i) => {
// if(item.id === id){
// this.list.splice(i, 1)
// return true;
// }
// })
// },
// 删除
del(id){
var index = this.list.findIndex((item, i) => {
if(item.id === id){
return true;
}
})
this.list.splice(index, 1)
},
//搜索
// seach(keywords){
// let newList = []
// this.list.forEach(item => {
// if(item.name.indexOf(keywords) != -1){
// newList.push(item)
// }
// });
// return newList;
// } //forEach some filter（过滤） findIndex（查找索引值） 都是属于数组的新方法
//都会对每个数组进行遍历，执行相关的操作
//搜索
seach(keywords){
return this.list.filter(item =>{
//es6中新提供的字符串的方法 includes(要包含字符串)，如果包含则返回true，
if(item.name.includes(keywords)){
return item
}
})
}
//过滤器的定义语法
//Vue.filter("过滤器的名称"， function(指定参数，随意参数){})
},
}) </script>
</html>
vue的品牌添加与筛选的功能集合的更多相关文章
- vue.js代码开发最常见的功能集合
1:点击新增按钮跳出新页面 <span class="inquire" @click="addNew">新增</span> 在方法中,添 ...
- Excel 2010 最熟悉的陌生功能：筛选器(将当前所选内容添加到筛选器)
使用excel2010版的同学,在进行筛选时,肯定都对这句话很熟悉:将当前所选内容添加到筛选器.但很多同学天天看到,却不知道什么是筛选器?它有什么作用. 其实,这里所指的筛选器就是储存筛选结果的一个虚 ...
- 循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制
在一个业务管理系统中,如果我们需要实现权限控制功能,我们需要定义好对应的权限功能点,然后在界面中对界面元素的功能点进行绑定,这样就可以在后台动态分配权限进行动态控制了,一般来说,权限功能点是针对角色进 ...
- spring boot+vue实现H5聊天室客服功能
spring boot+vue实现H5聊天室客服功能 h5效果图 vue效果图 功能实现 spring boot + webSocket 实现 官方地址 https://docs.spring.io/ ...
- 为现有图像处理程序添加读写exif的功能
为现有图像处理程序添加读取exif的功能 exif是图片的重要参数,在使用过程中很关键的一点是exif的数据能够和图片一起存在.exif的相关功能在操作系统中就集成了,在csharp中也似乎有了实现. ...
- FastReport 中添加二维码功能.(Delphi)
http://www.cnblogs.com/fancycloud/archive/2011/07/24/2115240.html FastReport 中添加二维码功能.(Delphi) 在实际 ...
- [原] XAF 添加日期筛选下拉选择
1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...
- phpcms 移植【添加相关文章】功能
添加相关文章功能相当有用,移植一个过来基本上可以实现比较复杂的页面内包含分类功能,做二次开发时可以省下不少力气. 用例:如果一个产品,属于一个厂家,而这个厂家是动态添加的,既不是一个分类,而是一个厂家 ...
- TogetherJS – 酷！在网站中添加在线实时协作功能
TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...
随机推荐
- 嵌入式C语言3.4 关键字---类型描述符auto/register/static/const/extern/volatile/
对内存资源存放位置的限定 1. auto 默认值---分配的内存都是可读可写的区域 auto int a; 区域如果出现 {} 我们认为在栈空间 2. register register int a; ...
- python 简易计算器
import tkinter import tkinter.messagebox import math ''' 波波版计算器可实现的功能 1.能进行简单的加减惩处 2.能进行开根号操作 3.能进行后 ...
- PAT甲级【2019年3月考题】——A1158 TelefraudDetection【25】
Telefraud(电信诈骗) remains a common and persistent problem in our society. In some cases, unsuspecting ...
- DNS解析全过程详解
1.Chrome浏览器 会首先搜索浏览器自身的DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存),看自身的缓存中是否有www.linux178.com 对应的条目,而且没有过期,如 ...
- 一、python基础之字符串的处理
最近开始重新回过头来巩固一下python的基础知识,并在此做一些记录以便未来更好的回顾 一.字符串的大小写转换 title() 使用title()方法可以将字符串中每个单词的首字母大写 name = ...
- Rikka with Nickname （简单题）
Rikka with Nickname 链接:https://www.nowcoder.com/acm/contest/148/J来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒空间限制:C/ ...
- dataframe字段过长被截断
总之能,情况就是这样. 看看df类型: 64位明显不够用啊. 网上找到了segmentfault有这个问题,上面说试试 pd.set_option('display.width', 200) ,再百度 ...
- 40.Unique Binary Search Trees（不同的二叉搜索树）
Level: Medium 题目描述: Given n, how many structurally unique BST's (binary search trees) that store v ...
- .net core 部署到IIS 以及上 HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure
安装AspNetCoreModule托管模块后执行 1.net stop was /y 2.net start w3svc 测试可以,但是需要装对应的托管模块的版本. 1. .NET Core与Win ...
- ubuntu16.04安装LNMP（ubuntu+Nginx+mysql+PHP7.0）
系统环境: Ubuntu 16.04.2 LTS nginx version: nginx/1.10.3 (Ubuntu) PHP 7.0.22-0ubuntu0.16.04.1 mysql Ver ...