vue动态添加事件,vue数组动态添加数据
这篇文章主要介绍了某视频剪辑软件实现动态列表尾部添加数据执行动画方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
动态列表尾部添加数据执行动画先上动画动态数据使用wowjs显示动画1.通过新公共管理安装2.在主页。射流研究…中引入animate.css
动态列表尾部添加数据执行动画
先上动画
动态控制节点数量（目前只显示6个节点)尾部添加几个项目，头部则删除几个项目触发过渡组动画接合的使用方法代码：
样式lang=scss 。内容{
显示器：flex
宽度：600像素
高度：50px
边距：100像素自动；
}。列表-完成-项目{
过渡：全1;
显示：内嵌-块；
宽度：100像素
文本对齐：居中；
行高：50px
字体大小：18px
}。列表-完成-输入，列表-完成-留给{
不透明度：0;
transform:平移x(-30px)；
}。列表-完成-保留-活动{
位置：绝对；
}
/风格
模板
div class=vueBox
transition-group class= content name= list-complete tag= div
跨度
v-for=列表中的项目
v-bind:key=item.value
class=列表-完成-项目
{{ item.name }}
/span
/过渡-组
/div
/模板
脚本
导出默认值{
名称："幻灯片动画",
data() {
返回{
列表：[
{
名称： 苹果，
值："1.68",
},
{
名称： 橘子，
值："0.9",
},
{
名称： 香蕉，
值："2.58",
},
{
名称： 猕猴桃，
值："3.2",
},
{
名称： 灵梦，
值："1.2",
},
{
名称： 李子，
值："13.2",
},
],
};
},
已安装(){
//定时模拟的窝的推送数据，需求：页面只显示6个节点，推送几个新的数据，则删除头部几个数组。
setInterval(()={
这个。动画()；
}, 3000);
},
方法：{
//生成指定随机范围的整数
随机编号(最小，最大){
switch (arguments.length) {
案例1:
返回parseInt(Math.random() * minNum 1，10)；
打破；
案例二：
返回解析int(数学。random()*(maxNum-minNum 1)minNum，10)；
打破；
默认值：
返回0;
打破；
}
},
动画(){
let newItems=[.这个。列表]；
//来一波随机个数，随机数组
设随机计数=1，
添加项目=[]；
randomCount=this.randomNum(1，3)；
console.info(生成随机数-尾部添加-头部删除，随机计数)；
数组. from(新数组(randomCount)，(n，i)=i).forEach(()=
addItems.push({
名称：(Math.random(0，1) * 1000).toFixed(0)，
值：Math.random(0，1)，
})
);
//删除数组头部几个项目
newItems.splice(0，随机计数)；
//数组尾部添加几个项目
新项目。拼接(新项目。长度，0，addItems)；
//触发过渡组动画
this.list=[.新项目]；
},
},
};
/脚本
动态数据使用wowjs显示动画
1.通过npm安装
新公共管理安装wowjs保存-开发
animate.css会自动安装。
2.在main.js中引入animate.css
导入wowjs/css/libs/animate.css
在组件需要的地方引入wowjs
有两种使用方式：
第一种：
从“wowjs”导入{哇}
已安装(){
新WOW().初始化()
}
第二种：
从“wowjs”导入世界林业人员协会(Woodmen of the World)
已安装(){
新哇.哇()。初始化()
}
wow实例化里面的配置参数
自己选择性添加配置参数
infinite无限次播放
如过添加动画的元素渲染数据是请求接口渲染的那么实例化哇一定得在接口请求结束之后使用这个. nextTick()在这个函数里面执行
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。