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 添加到您的网站中,您的用户可以在实时的互 ...
随机推荐
- Vue2.0---webpack打包知识点-1
打包上线或者将项目做成产品的肯定不希望暴露自己源码 在config的index.js中将productionGzip设置为false即可.(使之不生成.map文件). 对Vue-cli的webpack ...
- 在虚拟机的Linux系统下安装wineqq
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 本文参考教程:http://www.ubuntukylin.com/ukylin/forum.php?mod=viewthread& ...
- 重磅！挑战Oracle，华为将开源 GaussDB 数据库
来源:中关村在线,https://dwz.cn/nHNSOTeN 有消息称在正在进行的鲲鹏计算产业论坛上,华为宣布将开源其GaussDB数据库. GaussDB数据库是今年5月15日华为公布的分布式数 ...
- Linux服务器攻击防御（转）
攻击小贴士 如果你打算做一些搓事,那么你需要采取一些措施来保护自己.这是一切的前提,不然我会追杀你,并破坏你的生活. 我总结了几大忌(fuckups): 不要在honeypots执行操作.(在一切开始 ...
- jumpserver4.0centos7安装步骤
一步一步安装(CentOS) 测试推荐环境 CPU: 64位双核处理器 内存: 4G DDR3 数据库:mysql 版本大于等于 5.6 mariadb 版本大于等于 5.5.6 环境 系统: Cen ...
- Codeforces 488D Strip （set+DP）
D. Strip time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...
- MySQL的共享锁与排它锁编码演示
一.行锁之MySQL 使用SELECT ... FOR UPDATE 做事务写入前的确认 以MySQL 的InnoDB 为例,预设的Tansaction isolation level 为REPEA ...
- 看不懂源码？先来恶补一波Object原型吧
目录 Object Object属性 1.Object.prototype 2.Object.name Object方法 1.Object.assign() 2.Object.create() 3.O ...
- tf.keras 解决plot_model 的配置问题
https://blog.csdn.net/ha010/article/details/103367311
- 常看 Shell: 文本文件操作
文件显示和信息 wc wc 可以用于统计文件的行数和单词数. nl nl 在文件的每行内容前面加上行号. 基于行的操作 grep grep 用于筛选匹配特定字符的行. grep "Hello ...