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 添加到您的网站中,您的用户可以在实时的互 ...
随机推荐
- 科普：std::sort干了什么
std::sort算是STL中对OIer比较友好的函数了,但你有想过sort是如何保证它的高速且稳定吗? 正文 我们首先来到第一层:sort函数 template<typename _Rando ...
- JQuery获取与设置select
获取select : 1.获取select 选中的 text : $("#ddlregtype").find("option:selected").tex ...
- HTML图片
HTML图片 html图片 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲 ...
- PAT甲级【2019年3月考题】——A1158 TelefraudDetection【25】
Telefraud(电信诈骗) remains a common and persistent problem in our society. In some cases, unsuspecting ...
- Deepin环境下安装科学研究版Python和Pytorch--防网卡
Deepin环境下安装科学研究版Python和Pytorch--防网卡 由于本教程所引起的一切损失作者概不负责,本教程不使用pip和conda命令,因此下载好包后配合U盘可以给某个机器进行离线安装 · ...
- go语言统计字符个数
具体代码如下: package main import "fmt" func main() { m := make(map[rune]int, 1) var input strin ...
- hdu1158 Employment Planning（dp）
题目传送门 Employment Planning Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
- c#各类DI容器
IOC控制反转:说的是创建对象实例的控制权从代码控制剥离到IOC容器控制,实际就是你在xml文件控制,侧重于原理. DI依赖注入:说的是创建对象实例时,为这个对象注入属性值或其它对象实例,侧重于实现. ...
- GIT 的常见用法
git init 新建代码库 git clone新建项目 git branch 查看分支 git config 显示配置 git config -e 显示配置文件 git config user.na ...
- JS设置首字母大写算法
返回一个字符串,确保字符串的每个单词首字母都大写,其余部分小写. 像'the'和'of'这样的连接符同理. function titleCase(str) { //把字符串所有的字母变为小写,并根据空 ...