vue（四）品牌列表案列
程序员文章站
2022-05-15 22:49:15
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body for-inline">
<label for="">
id:
<input type="text" class="form-control" v-model="id">
</label>
<label for="">
Name:
<input type="text" @keyup.enter="add" class="form-control" v-model="name">
</label>
<input type="button" @click="add()" value="添加" class="btn-primary">
<label for="">
搜索名称关键字：
<input type="text" class="form-control" v-model="keywords" v-focus>
</label>
</div>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in search(keywords)" :key="item">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | dateFormat('Y-m-d H:i:s') }}</td>
<!-- prevent 组织a标签默认行为 -->
<td><a href="" @click.prevent="del(index)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
// vue 全局过滤器格式化时间戳
Vue.filter('dateFormat',function(dataStr, pattern = "Y-m-d"){
var dt = new Date(dataStr);
var y = dt.getFullYear();
// 字符串填充补位padStart（前）padEnd（后）
var m = (dt.getMonth()+1).toString().padStart(2,0);
var d = (dt.getDate()).toString().padStart(2,0);
// 字母转换小写
if (pattern === "Y-m-d"){
// 模板字符串
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 自定义指令 参数一名称 参数二对象
Vue.directive('focus',{
// 指令绑定元素时 只会触发一次
bind:function(el){
// el.focus();
},
// 元素插入DOM中的时候 只会触发一次
inserted:function(el){
el.focus();
},
// 当VNode更新时发生 可能会触发多次
updated:function(el){},
})
new Vue({
el: '#app',
data: {
id:'',
name:'',
keywords:'',
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
],
},
methods: {
add(){
this.list.push({
id:this.id,
name:this.name,
ctime:new Date()
});
this.id = this.name= '';
},
del(index){
this.list.splice(index,1);
},
// 关键字搜索
search(keywords){
// var newList = [];
// this.list.forEach(item => {
// if(item.name.indexOf(keywords) != -1) {
// newList.push(item);
// }
// })
// return newList;
// filter循环遍历数组直接返回一个新数组
return this.list.filter(item => {
// includes ES6 新方法字符串内是否包含
if(item.name.includes(keywords)) {
return item;
}
})
},
},
filters: {
// 私有过滤器
dateFormat2:function(){
// ....
}
},
direction:{
// 私有指令
'focus2':{
// bind:function(el){
// // .....
// },
},
// 简写
'focus3':function(){
// 等同于把代码写到bind中 和updated中
// ...
}
}
})
</script>
</body>
</html>
上一篇： vue.js class属性动态绑定
下一篇： 点击将文字复制到剪切板