vue-案例:品牌
程序员文章站
2022-03-03 09:17:47
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>-->
<script src="lib/vue.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap.min.css"/>
</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">
<lable>Id:<input type="text" class="form-control" v-model="id"/></lable>
<lable>Name:<input type="text" class="form-control" v-model="name"/></lable>
<!--add()中括号可加可不加，加了就可以传参-->
<input type="button" value="添加" class="btn btn-primary" @click="add" @keyup.enter="add"/>
<lable>搜索名称关键字:<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'"/></lable>
</div>
</div>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>time</td>
<td>operate</td>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" v-bind:key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime|timeFilter()}}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.filter('timeFilter',function(data,dateFormat){
var newDate = new Date(data);
var y = newDate.getFullYear();
var m = newDate.getMonth();
var d = newDate.getDate();
var h = newDate.getHours();
var M = newDate.getMinutes();
var s = newDate.getSeconds();
//return `${y}-${m}-${d}`;模板字符串 es6
if(dateFormat&&dateFormat.toLowerCase()=="yyyy-mm-dd"){
return y+"-"+m+"-"+d;
}else{
return y+"-"+m+"-"+d+" "+h+"-"+M+"-"+s;
}
});
/*
自定义指令：
Vue.directive('参数1',{参数2})
参数1是指令的名称，不需要加v-,但是在调用的时候需要加v-
参数2是一个对象在这个对象身上有一些指令相关的函数，在特定阶段执行相关操作
el:表示被绑定了指令的那个元素，el是一个原生的js对象
*/
Vue.directive('focus',{
bind:function(el){
//未插入dom,此时可以绑定样式
},
inserted:function(el){
el.focus();//只有插入dom之后才能获取焦点
}
});
Vue.directive('color',{
bind:function(el,binding){
el.style.color=binding.value;
},
inserted:function(el){
}
});
var app = new Vue({
el:"#app",
data:function(){
return {
list:[{id:1,name:'宝马',ctime:new Date()},{id:2,name:'奔驰',ctime:new Date()}],
id:"",
name:"",
keywords:""
}
},
methods:{
add:function(){
var car = {id:this.id,name:this.name,ctime:new Date()};
this.list.push(car);
this.id=this.name='';
},
del:function(id){
var thisList = this.list;
this.list.some(function(item,i){
if(item.id==id) {
thisList.splice(i, 1);
return true;
}
})
},
/*
数组遍历 foreach some findIndex filter
https://blog.csdn.net/gis_swb/article/details/52297343
*/
/*del:function(id){
this.list.some((item,i) => {
if(item.id==id){
this.list.splice(i,1);
return true;
}
})
}
del:function(id){
var index = this.list.findIndex((item) => {
if(item.id==id){
return true;
};
this.list.splice(index, 1)
})
}*/
search:function(keywords){
var newList = []
this.list.forEach(function(item){
if(item.name.indexOf(keywords)!=-1){
newList.push(item);
}
});
return newList;
}
}
});
</script>
</body>
</html>上一篇： RabbitMQ 整合 Spring
下一篇： C语言实现学生成绩管理系统项目