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 添加到您的网站中,您的用户可以在实时的互 ...
随机推荐
- pyppeteer模块的基本使用
pyppeteer模块的基本使用 引言 Selenium 在被使用的时候有个麻烦事,就是环境的相关配置,得安装好相关浏览器,比如 Chrome.Firefox 等等,然后还要到官方网站去下载对应的驱动 ...
- SpringBoot连接Oracle
pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
- UVA 12446 How Many... in 3D! ( 递推 + 树状数组 )
C. How Many... in 3D! Time Limit: 1000ms Memory Limit: 131072KB 64-bit integer IO format: %lld ...
- Android中shape的使用方法总结
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http ...
- spring-data-neo4j了解
本项目demo地址[请阅读readme文件]: https://gitee.com/LiuDaiHua/project-neo4j 最近项目上要搭建一个关系图谱的东西,领导给了neo4j和d3两个概念 ...
- 从现在开始强迫自己使用 Reflect
静态方法 Reflect.apply(target, thisArg, args) 等同于 Function.prototype.apply.call(func, thisArg, args) Ref ...
- Python的基本类型(list,tuple)
Python的基本类型(list,tuple) 一列表: 1.列表是Python基础的数据类型之一,其他语言也有类似的数据类型,比如js中的数组,java中的数组等,它是以[]括起来 ,每个元素用', ...
- Oracle update 两表及以上关联更新，出现多值情况，不是一对一更新
为了方便起见,建立了以下简单模型,和构造了部分测试数据:在某个业务受理子系统BSS中, SQL 代码--客户资料表 create table customers ( customer_id numbe ...
- 2019-9-2-win10-uwp-九幽图床
title author date CreateTime categories win10 uwp 九幽图床 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 1 ...
- 在 Visual Studio 中使用 Q# 进行量子编程
1 量子计算机与量子编程 1.1 量子计算机 Quantum computing is computing using quantum-mechanical phenomena, such as su ...