Vue中的列表过渡

发布时间:2019-11-13 22:37:12 作者:tianxiang1314 阅读量:154

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的列表过渡</title>
<script src="vue/vue.js"></script>
<style type="text/css">
.v-enter{
opacity: 0;
}
.v-enter-active{
transition: opacity 4s;
}
</style>
</head>
<body>
<div id="app">
<transition-group> 
<div v-for="item in lists" :key="item.id">{{item.name}}</div>
</transition-group> 
<button @click="addData">添加</button>
</div>
<script type="text/javascript">
var count = 0;
var app = new Vue({
el:"#app",
data:{
lists:[],
},
methods:{
addData:function(){
this.lists.push({
id:count++,
name:'hello world',
});
}
}
});
</script>
</body>
</html>

我要评论 登录后才能发布评论

推荐阅读

 2019-11-06 21:47:19   tianxiang1314

vue.js定义全局组件

 2019-12-24 22:18:53   tianxiang1314

vue.js返回上一级操作

 2019-12-22 10:03:19   tianxiang1314

Xshell拖拽文件到linux...

 2019-12-18 21:21:06   tianxiang1314

把数据保存到数据库附加表 `de...

 2019-12-14 10:49:37   tianxiang1314

JavaScript 实现九宫格...

 2019-12-10 21:04:30   tianxiang1314

vuex使用方式(实现非父子组件...

 2019-12-05 22:30:18   tianxiang1314

better-scroll滚动无...

胡晓飞笔记   我要留言
Catfish(鲶鱼) CMS V 4.9.63