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 添加到您的网站中,您的用户可以在实时的互 ...
随机推荐
- PAT甲级【2019年3月考题】——A1156 SexyPrimes【20】
Sexy primes are pairs of primes of the form (p, p+6), so-named since “sex” is the Latin word for “si ...
- 关于曲线 规划 算法 线性 S曲线 贝塞尔曲线
工控领域经常会涉及速度加减速的算法:线性加减速,S曲线加减速(sin函数,拓展其他三角函数曲线), 贝塞尔曲线,等等. 线性加减速: 设定起始速度V0,目标速度V1,加速时间Ta(s,或加速度) ...
- Jmeter接口测试加解密及Bean Shell使用案例
Jmeter接口测试加解密及Bean Shell使用案例 https://blog.csdn.net/russ44/article/details/56009084 本文以base64加解密为例: 一 ...
- 【置顶】CSP/S 2019退役祭
标题没错,今年就是我的最后一年了. 才高一啊,真不甘心啊. DAY1(之前的看前几篇博客吧) T1 现在没挂 T2 貌似是树形DP,跑到80000的深度时挂了,于是特判了链的情况,大样例过了,现在没挂 ...
- HDU - 2181 C - 哈密顿绕行世界问题（DFS
题目传送门 C - 哈密顿绕行世界问题 一个规则的实心十二面体,它的 20个顶点标出世界著名的20个城市,你从一个城市出发经过每个城市刚好一次后回到出发的城市. Input 前20行的第i行有3个数, ...
- Elasticsearch7.3开启x-pack验证
原文 Elasticsearch7开启x-pack验证 前言 在Elasticsearch7.3,x-pack已经作为默认的插件集成在Elasticsearch里面了,所以无需在bin/elastic ...
- 最新版的node安装和配置注意事项
node在安装的时候,如果你不想用默认的安装路径,可以自定义路径进行安装,例如我的安装路径如下:F:\Program Files\nodejs 安装完成后,要对node进行配置: 在F:\Progra ...
- 二、kubernetes搭建集群
一.准备工作 主要内容 .环境准备(2主机) .安装流程 .问题分析 .总结 环境配置(2主机) 系统:CentOS 7.3 x64 网络:局域网(VPC) 主机: master:172.16.0.1 ...
- Makefile总结（转帖）
文章地址:http://www.cnitblog.com/textbox/archive/2009/10/21/62036.aspx makefile 主要包含以下几点 显式规则 :描述了在何种情况 ...
- 转载:php excel 的处理
下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...