<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src='vue.min.js'></script>
<link rel="stylesheet" href="animate.css">
<style>
li{
background-color: green;
list-style: none;
border:1px solid black;
margin-bottom: 4px;
width: 200px;
padding: 2px;
}
</style>
</head>
<body>
<div id='app'>
<div>
<input type="text" @input='chg' v-model='msg'>
<ul>
<transition-group enter-active-class='animated fadeIn' leave-active-class='hinge animated'>
<li v-for='(v,i) in arr2' :key='i'>{{v}}</li>
</transition-group>
</ul>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
arr:['apple','banana','pear','watermelon','orange','hello'],
msg:'',
arr2:[]
},
methods:{
chg(){
this.arr2 = [];
this.arr.forEach(function(val){
if(this.msg !== ''){
if(val.indexOf(this.msg) >= 0){
this.arr2.push(val);
}
}
}.bind(this));
}
}
});
</script>
</body>
</html>vue动画+animate.css
猜你喜欢
转载自blog.csdn.net/hahahahahahahaha__1/article/details/81609642
今日推荐
周排行