分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

vue中wowjs的使用

发布时间:2023-09-06 02:26责任编辑:沈小雨关键词:js

(1)通过npm安装:

npm install wowjs --save-dev

animate.css会自动安装。

(2)在main.js中引入animate.css

import ‘animate.css‘
在组件需要的地方引入wowjs

有两种使用方式:

1. import {WOW} from ‘wowjs‘    mounted() { new WOW().init() }

2.import WOW from ‘wowjs‘    mounted() { new WOW.WOW().init() }

下面给出在实例中的应用:

<template>
?<div class="caselist">
???<ul class="clearfix">
?????<li class="wow slideInUp" v-for="(item, index) in cases" :key="index">
?????</li>
???</ul>
?</div>
</template>

<script type="text/ecmascript-6">
?import {WOW} from ‘wowjs‘

?export default {
???props: [‘cases‘],
???watch: {
?????cases() {
???????this.$nextTick(() => { // 在dom渲染完后,再执行动画
?????????var wow = new WOW({
???????????live: false
?????????})
?????????wow.init()
???????})
?????}
???}
?}
</script>
 
---------------------
作者:yumihe
来源:CSDN
原文:https://blog.csdn.net/qq_32678401/article/details/82016802
版权声明:本文为博主原创文章,转载请附上博文链接!

vue中wowjs的使用

原文地址:https://www.cnblogs.com/shaozhu520/p/10129845.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved