19.Vue.js :小Demo添加动画删除

57 阅读 0 评论 38 点赞

我是靠谱客的博主疯狂钢笔，最近开发中收集的这篇文章主要介绍19.Vue.js :小Demo添加动画删除，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
<title>列表展示删除添加</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
<link rel="stylesheet" href="./animate.css">
<style>
#app {
width: 600px;
margin: 20px auto;
position: relative;
}
.dv1,
.dv2 {
border: 1px solid black;
margin-bottom: 10px;
padding: 5px;
}
table {
width: 600px;
border-right: 1px solid black;
border-top: 1px solid black;
}
.tb th {
width: 600px;
background-color: blue;
color: white;
border-bottom: 1px solid #000;
}
.tb th,
.tb td {
border-left: 1px solid black;
border-bottom: 1px solid #000;
text-align: center;
padding: 5px;
}
.titip {
width: 200px;
height: 100px;
background-color: pink;
padding: 10px;
text-align: center;
position: absolute;
top: 30%;
right: 25%;
}
button {
margin-right: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="dv1">
编号：
<input type="text" v-model="newId" id='inputId' ref='inputRefId' v-myfocus v-mycolor='color'> 品牌名称：
<input type="text" v-model="newName">
<input type="button" value="添加" @click='addData'>
</div>
<div class="dv2">
品牌名称：
<input type="text" placeholder="请输入搜索条件" v-model='searchVal'>
</div>
<div class="tb">
<table cellpadding="0" cellspacing="0">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for='(item,index) in newList' :key='index'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!-- 在需要过滤的数据后面加上管道符 |过滤器名称 -->
<td>{{item.ctime|fmtTime('/')}}</td>
<td><a href="#" @click='showBox(item.id)'>删除</a></td>
</tr>
<tr v-if='list.length===0'>
<td colspan='4'>没有品牌数据</td>
</tr>
</table>
</div>
<transition enter-active-class='animated fadeInRight' leave-active-class='animated fadeOutRight'>
<div class="titip" v-if='isShow'>
<h3>你确定要删除{{tempId}}号吗？</h3>
<button @click='confirmDel()'>确定</button><button @click='cancelDel'>取消</button>
</div>
</transition>
</div>
<script>
//通过Vue.filter()方法创建过滤器，它有两个参数，第一个参数是过滤器的名字，第二个参数是过滤器的处理函数，
//这个处理函数有个默认的参数，表示需要过滤的数据
//创建一个时间过滤器fmtTime
Vue.filter('fmtTime', function(time, seprator) {
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
return y + seprator + m + seprator + d
})
//这里实际上创建的是v-myfocus指令
Vue.directive('myfocus', {
//inserted钩子函数，它表示自定义指令插入到标签中的时候就执行
//inserter钩子函数有两个参数（el,bingding) el表示使用自定义指令的元素，binding表示自定义指令的信息
inserted(el, binding) {
el.focus();
}
})
//创建是的v-mycolor='color'指令
Vue.directive('mycolor', {
inserted(el, binding) {
//binding.value可以获取传入自定义指令中的属性的值
el.style.color = binding.value
}
})
var vm = new Vue({
el: '#app',
data: {
newId: '',
newName: '',
color: 'red',
searchVal: '',
isShow: false,
tempId: '',
tempIndex: '',
list: [{
id: 1,
name: '宝马',
ctime: new Date()
}, {
id: 2,
name: '奔驰',
ctime: new Date()
}, {
id: 3,
name: '大众',
ctime: new Date()
}, {
id: 4,
name: '海马',
ctime: new Date()
}, ]
},
// mounted() {
// document.getElementById('inputId').focus()原生js方式实现的
//通过this.$refs.ref的值--来获取dom
// this.$refs.inputRefId.focus()
// },
methods: {
deleteData(idx) {
this.list.splice(idx, 1)
},
showBox(id, index) {
this.tempId = id;
this.tempIndex = index;
this.isShow = !this.isShow
},
confirmDel(idx) {
this.isShow = false;
this.deleteData(this.tempIndex)
},
cancelDel() {
this.isShow = false
},
addData() {
this.list.push({
id: this.newId,
name: this.newName,
ctime: new Date()
})
}
},
computed: {
newList() {
return this.list.filter(value => value.name.indexOf(this.searchVal) !== -1)
}
}
})
</script>
</body>
</html>