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" />
<title>Document</title>
<script src="./lib/vue.js"></script>
<link rel="stylesheet" href="./lib/bootstrap.min.css" />
<!-- 需要用到Jquery吗？？？其实不需要的jq主要是用Js进行查询、操作DOM元素的，而VUE是用于免除操作DOM的过程，所以不需要加载的 -->
</head>
<body>
<div id="app">
<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:
<input
type="text"
class="form-control"
v-model="name"
@keyup.f2="add"
/>
</label> <!-- 在VUE使用事件绑定机制，为元素指定处理函数时，如 果加（）就可以传参数了 -->
<input
type="button"
value="添加"
class="btn btn-primrary"
@click="add"
/>
<label>
搜索名称关键字：
<input
type="text"
class="form-control"
v-model="keywords"
id="search"
v-focus
v-color="'red'"
/>
</label>
</div>
</div> <table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Opertion</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td>{{ item.ctime | dateFormat(' ')}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
//全局的过滤器，进行时间的格式化
Vue.filter("dateFormat", function(dateStr, pattern = "") {
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dateStr); var y = dt.getFullYear();
//后面加的padStart是ES6新用法，自动补全的，长度为2，用0补充！目的是让个位数改成0两位数！
var m = (dt.getMonth() + 1).toString().padStart(2, "0");
var d = dt
.getDate()
.toString()
.padStart(2, "0"); if (pattern.toLowerCase() === "yyyy-mm-dd") {
return `${y}-${m}-${d}`;
} else {
var hh = dt
.getHours()
.toString()
.padStart(2, "0");
var mm = dt
.getMinutes()
.toString()
.padStart(2, "0");
var ss = dt
.getSeconds()
.toString()
.padStart(2, "0"); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}); //自定义全局按键修饰符：新系统自动生成的按键也就几种，这个数字是其按键对应的键值！为避免难以记忆先声明定义下！
Vue.config.keyCodes.f2 = 113;
//获取焦点的--使页面刷新就在搜索框内能点取
Vue.directive("focus", {
bind: function(el) {},
inserted: function(el) {
el.focus();
},
update: function(el) {}
});
//获取焦点的字体颜色变成指定的颜色！
Vue.directive("color", {
bind: function(el, binding) {
el.style.color = binding.value;
}
});
//创建Vue实例
var vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
keywords: "",
list: [
{ id: 1, name: "奔驰", ctime: new Date() },
{ id: 2, name: "宝马", ctime: new Date() }
]
},
methods: {
add() {
// 从data上获取id name，组织个对象，用数组的方法进行添加
var car = { id: this.id, name: this.name, ctime: new Date() };
this.list.push(car);
this.id = this.name = "";
},
del(id) {
//根据id删除数据--找到索引，调用数组的splice方法
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1);
//在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
return true;
}
});
//第二种方法--专门查找索引
// var index=this.list.findIndex(item =>{
// if(item.id==id) {
// return true;
// }
// })
// this.list.splice(index,1)
},
search(keywords) {
//根据关键字，进行数据的搜索
// var newList=[]
// this. list.forEach(item=>{
// if(item.name.indexof(keywords) !=-1){
// newList.push(item)
// }
// })
// return newList
// forEach some filter findIndex这些都是数组的新方法，都会对数组中的每一项，进行遍历，执行相关的操作
return this.list.filter(item => {
//在ES6中，为字符串提供一种新方法，叫String.prototype.includes('要包含的字符串') 相当于contain
if (item.name.includes(keywords)) {
return item;
}
});
}
}
});
</script>
</body>
</html>
Vue学习之品牌案例部分代码小结（二）的更多相关文章
- Vue学习之基础及部分指令小结（一）
一.理解MVC和MVVM的关系: MVC:Model View Controller (模型 视图 控制器) 分别为:业务逻辑.界面.用来调度View和Model层 MVVM:Model View V ...
- Vue学习之全局和私有组件小结（七）
一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...
- Vue学习之过滤器和自定义指令小结（三）
过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...
- 1.使用Vue.js实现品牌案例添加功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习之路之登录注册实例代码
Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...
- vue学习笔记2
Vue.js - Day2 品牌管理案例 添加新品牌 删除品牌 根据条件筛选品牌 1.x 版本中的filterBy指令,在2.x中已经被废除: filterBy - 指令 <tr v-for=& ...
- vue学习（2）
node.js介绍与npm操作 1.node就是JavaScript的一个运行环境(平台),他不是一门语言,也不是JavaScript框架,可以用来开发服务器端应用程序,web系统,其特点是体积小.快 ...
- Vue学习【第一篇】：Vue初识与指令
什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- VIJOS-P1282 佳佳的魔法照片
洛谷 P1583 魔法照片 洛谷传送门 JDOJ 1396: VIJOS-P1282 佳佳的魔法照片 JDOJ传送门 Description 一共有n个人(以1--n编号)向佳佳要照片,而佳佳只能把照 ...
- DS18B20温度获取
https://detail.tmall.com/item.htm?id=40083203373&spm=a1z09.2.0.0.31cd2e8d1sb06V&_u=e1qf7bf56 ...
- 图像处理pillow模块
pillow模块: -->基本的图像处理模块 Pip install pillow from PIL import Image #1.读取图片 im = Image.open('/test.jp ...
- chentos7 编译安装keepalived 1.4.5
准备工作: 下载源码包,官方网站 下载命令:wget https://www.keepalived.org/software/keepalived-1.4.5.tar.gz 解压tar包,命令: ta ...
- 第02组 Alpha冲刺（2/6）
队名:無駄無駄 组长博客 作业博客 组员情况 张越洋 过去两天完成了哪些任务 任务分配.进度监督 提交记录(全组共用) 接下来的计划 沟通前后端成员,监督.提醒他们尽快完成各自的进度 还剩下哪些任务 ...
- 全球 IPv4 地址正式耗尽
重要消息: 就在 2019/11/25 UTC+1 15:35 时,一封来自欧洲 RIPE NCC 的邮件中得到确认:全球的IPv4地址已经彻底耗尽. IPv4 大家应该很熟悉了,就是我们平常所知道的 ...
- Redis常见场景解析
一 前言 Redis是一个key-value存储系统,现在在各种系统中的使用越来越多,大部分情况下是因为其高性能的特性,被当做缓存使用,这里介绍下Redis经常遇到的使用场景. 二 Redis特性 一 ...
- CentOS安装SonarQube7.9.1
1.准备 SonarQube版本:sonarqube-7.9.1.zip,官网地址:https://www.sonarqube.org/downloads/ jdk版本:jdk-11.0.4_linu ...
- c# .net 使用Confluent.Kafka针对kafka进行生产和消费
首先说明一点,像Confluent.Kafka这种开源的组件,三天两头的更新.在搜索引擎搜索到的结果往往用不了,浪费时间.建议以后遇到类似的情况直接看官网给的Demo. 因为搜索引擎搜到的文章,作者基 ...
- java 获取类路径
package com.jason.test; import java.io.File; import java.io.IOException; import java.net.URL; public ...