【Vue】小项目之品牌案例

最新推荐文章于 2020-12-12 05:46:06 发布

KkaBum

最新推荐文章于 2020-12-12 05:46:06 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/KkaBum/article/details/101311368

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
</style>
</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" name="" class="form-control" v-model ="id">
</label>
<label>
Name:
<input type="text" name="" class="form-control" v-model="name" v-on:keyup.enter.f2="add">
</label>
<input type="button" value="添加" name="" class="btn btn-primary" v-on:click = "add">
<label>
搜索名称关键字：
<input type="text" name="" class="form-control" v-model="keywords" v-focus>
</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 in search(keywords)" v-bind:key="item.id">
<td>{{item.id}}</td>
<td v-text = "item.name"></td>
<td>{{item.ctime | dataFormat("") }}</td>
<td>
<a href="" v-on:click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h3 v-bind:style = "styleObj"v-color="'pink'" v-fontweight = "900">{{dt | dataFormat("")}}</h3>
</div>
<script type="text/javascript">
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
//定义全局的指令
Vue.directive("focus",{
bind:function(el){ //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数永远都是el，表示被绑定了指令的那个元素，这个el元素，是一个js原生对象
//在元素刚绑定指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作业，
//因为bind一个元素只有插入DOM之后才能获取焦点
},
inserted:function(el){ //inserted表示元素插入到DOM中的时候，会执行instered函数，这个函数只会执行一次
el.focus()
},
updated:function(el){ //当VNode更新的时候，会执行update，可能会触发多次
}
});
Vue.directive("color",{
bind:function(el,binding){
el.style.color = binding.value
console.log("ok")
}
})
//全局的过滤器格式化时间
Vue.filter("dataFormat",function(dataStr,pattern){
var dt = new Date(dataStr)
var y = dt.getFullYear()
var m = dt.getMonth()+1
var d = dt.getDate()
// return y+"-"+m+"-"+d
if (pattern && pattern.toLowerCase() === "yyyy-mm-dd"){
return `${y}-${m}-${d}` //es6
}else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d}-${hh}-${mm}-${ss}`
}
} )
//定义一个私有的过滤器
var vm2 = new Vue({
el:"#app2",
data:{
dt:new Date(),
styleObj:{
fontSize:"90px"
}
},
methods:{},
filters:{
dataFormat:function(dataStr,pattern){
var dt = new Date(dataStr)
var y = dt.getFullYear()
var m = (dt.getMonth()+1).toString().padStart(2,"0")//用es6将字符串填充至两位，如6-->06
var d = (dt.getDate()).toString().padStart(2,"0")
if (pattern && pattern.toLowerCase() === "yyyy-mm-dd"){
return `${y}-${m}-${d}` //es6
}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}~~~~~~~~~`
}
}
},
directives:{ //自定义私有指令
"fontweight":{
bind:function(el,binding){
el.style.fontWeight = binding.value;
}
}
}
})
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:function(){
// console.log("ok")
var car = {id:this.id,name:this.name,ctime:new Date()}
this.list.push(car)
this.id=''
this.name=''
},
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(item =>{
if(item.name.indexOf(keywords) !=-1){
newList.push(item)
}
})
return newList;
}*/
search:function(keywords){
return this.list.filter(item=>{
if (item.name.includes(keywords)){
return item
}
})
}
}
})
</script>
</body>
</html>

KkaBum

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】小项目之品牌案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>  <script src="https://cdn.stat...
复制链接

扫一扫