<!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>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<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="./lib/vue.js"></script>
</head>
<body>
<div id="app1">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
<!-- bootstrap中input添加.form-control类，表示为input元素添加表单控件；
可以为标签元素添加CSS定制样式。
-->
Id:<input type="text" class="form-control" v-model="id">
</label>
<label>
<!--
vue提供了keyup后的按键默认键有:
keyup.enter
keyup.tab
keyup.delete
keyup.esc
keyup.space
keyup.up
keyup.down
keyup.left
keyup.right
其实keyup.后面的这个 就是键盘上每个键对应的js里面的keycode码值(keycode)
可以查询 比如keyup.enter 相当于 keyup.13只不过 Vue帮我们定义好了而已
如果自定义某个按键的事件 我们可以通过Vue.config.keyCodes来定义
实现和添加按钮相同的功能 按f2键后实现 添加功能 调用相同的add函数
-->
Name:<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<label>
<!-- 自定义全局指令v-focus 实现焦点事件 -->
搜索name关键字:<input type="text" class="form-control" v-model="keywords" v-focus v-color>
</label>
<!-- @click="add"调用add函数不能传参数
@click="add()"调用add函数 可以进行传参 -->
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
</div>
<table class="table table-striped table-bordered">
<thead>
<tr class="active">
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!-- 思路是过滤list 将符合条件的数据放到一个新List里 然后再for循环遍历 -->
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<!-- v-text 等同于上面的表达式 -->
<td v-text="item.name"></td>
<td>{{item.ctime | dataFormat('yyyy-MM-dd hh:mm:ss')}}</td>
<!-- 禁止事件的默认行为 此处就是禁止了超链接跳转标签的作用 -->
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
//自定义全局指令v-focus 定义的时候不需要加上v-前缀 但使用的时候必须加上v-前缀
//参数1 指令名称
//参数2 是一个对象 这个对象身上有一些指令相关的函数 这些函数可以在特定的阶段 执行相关的操作
//里面函数的 每个第一参数都是el 指的是被绑定的指令的那个元素
//且这个el是一个原生的dom对象 包含dom元素拥有的方法
Vue.directive('focus',{
//每当指令绑定到元素上的时候,会执行这个bind函数 只触发执行一次
bind : function(el){
//在元素刚绑定指令的时候 还没有插入到DOM中去 这个时候 调用focus()方法没有作用
//因为一个元素只有插入DOM之后 才能获取焦点
//所以el.focus()用到这里是不对的
// el.focus();
},
//和js行为相关的 在inserted中操作
//表示元素插入到DOM中的时候 会执行inserted函数 只触发执行一次
inserted : function(el){
el.focus();
},
//当组件 即vnode更新的时候 会触发该函数 可能触发执行多次
updated : function(el){
}
});
//自定义一个字体颜色的指令v-color
Vue.directive('color',{
bind : function(el){
//和样式相关的操作 在bind函数中
//样式 只要通过指令绑定给了元素 不管这个元素有没有被插入到页面中去
//这个元素 肯定有了一个内联的样式 将来元素肯定会显示到页面中去
el.style.color = 'red';
}
});
//自定义某个按键的事件 f2按键 实现添加功能
Vue.config.keyCodes.f2 = 113;
//注意 这是全局过滤器 如果再有<div id="app2"></div> 和一个vue2对象 那么过滤器也是生效的
//默认给pattern一个默认值 防止上面的函数不穿值 导致undefined
Vue.filter('dataFormat', function (dateStr, pattern = "") {
//将字符串转化成Date类型 yyyy-mm-dd
var dt = new Date(dateStr);
//取出年 月 日 用-拼接起来
var y = dt.getFullYear();
//dt.getMonth()从0开始 要+1 不足两位 前面补0 比如1月 01月
var m = (dt.getMonth() + 1).toString().padStart(2, "0");
//不足2位 前面补0
var d =(dt.getDate()).toString().padStart(2, "0");
if ('yyyy-mm-dd' == pattern.toLowerCase(pattern)) {
// var formatDateStr = y +'-'+ m +'-'+d;
// return formatDateStr;
//相当于上面的 注意切换英文输入法 连着按两下esc下面的间隔号按键
return `${y}-${m}-${d}`;
} else {
//返回时分秒
//不足2位 前面补0
var hh = dt.getHours().toString().padStart(2, "0");
//不足2位 前面补0
var mm = dt.getMinutes().toString().padStart(2, "0");
//不足2位 前面补0
var ss = dt.getSeconds().toString().padStart(2, "0");
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
var vm1 = new Vue({
el: '#app1',
data: {
id: '',
name: '',
keywords: '',
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() },
{ id: 3, name: '路虎', ctime: new Date() }
]
},
methods: {
add() {
var car = { id: this.id, name: this.name, ctime: new Date() };
this.list.push(car);
//添加完 文本框要恢复空白
this.id = '';
this.name = '';
},
del(id) {
//根据id查找出该条数据在数组中的位置 然后删除
//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
//some() 方法会依次执行数组的每个元素：
//如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
//如果没有满足条件的元素，则返回false。
//方法1
// this.list.some((item,i) => {
// if(item.id = id){
// this.list.splice(i,1);
// return true;
// }
// });
//方法2
//查找数组中元素的位置
var index = this.list.findIndex(item => {
if (item.id = id) {
return true;
}
});
this.list.splice(index, 1);
},
//方式1
// search(keywords){
// var newList = [];
// this.list.forEach(element => {
// //遍历的数据中 包含输入的关键字
// if(element.name.indexOf(keywords)!=-1){
// newList.push(element);
// }
// });
// return newList;
// },
//方式2
search(keywords) {
var newList = this.list.filter(element => {
if (element.name.includes(keywords)) {
return element;
}
});
return newList;
}
},
filters: {
//定义私有过滤器
//每个过滤器都有 过滤器名称和处理函数
//即使私有过滤器和全局过滤器名字一样 但还是会用私有的 这里
//过滤器的调用采用的是就近原则
dataFormat: function (dateStr, pattern = "") {
//将字符串转化成Date类型 yyyy-mm-dd
var dt = new Date(dateStr);
//取出年 月 日 用-拼接起来
var y = dt.getFullYear();
//dt.getMonth()从0开始 要+1
var m = (dt.getMonth() + 1).toString().padStart(2, "0");
var d = dt.getDate().toString().padStart(2, "0");
if ('yyyy-mm-dd' == pattern.toLowerCase(pattern)) {
// var formatDateStr = y +'-'+ m +'-'+d;
// return formatDateStr;
//相当于上面的 注意切换英文输入法 连着按两下esc下面的间隔号按键
return `${y}-${m}-${d}`;
} else {
//返回时分秒
//不足2位 前面补0
var hh = dt.getHours().toString().padStart(2, "0");
//不足2位 前面补0
var mm = dt.getMinutes().toString().padStart(2, "0");
//不足2位 前面补0
var ss = dt.getSeconds().toString().padStart(2, "0");
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
});
</script>
</body>
</html>
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
