影视怎么建设网站,做网站博客怎么推广,快速建设网站方案,潍坊企业网站价格使用场景#xff1a;
①页面加载时实现数字从0开始滚到指定数字
②大屏数字的滚动增长
1.安装vue-countupjs npm install vue-countupjs --save 2.使用
①全局使用
main.js引入 import VueCountUp from vue-countupjs
Vue.use(VueCountUp)
Vue.component(VueCountUp, Vue…使用场景
①页面加载时实现数字从0开始滚到指定数字
②大屏数字的滚动增长
1.安装vue-countupjs npm install vue-countupjs --save 2.使用
①全局使用
main.js引入 import VueCountUp from vue-countupjs
Vue.use(VueCountUp)
Vue.component(VueCountUp, VueCountUp) //全局注册组件 在组件中直接使用
div stylecolor: #b72830;font-size: 50px数字VueCountUp :start-value0 :end-valuenum :duration5 :decimals1 :optionsoptions//div②局部使用
在需要用到的组件里引入
templatedivVueCountUp :start-value0 :end-valuenum :duration1//div
/template
script
import VueCountUp from vue-countupjs //引入
export default {components: { VueCountUp },data(){return{num:80, } }
}
script/3.参数介绍 属性 意义 默认值 tag 数字的包装器 span startValue 起始值 0 endValue 结束值 0 decimals 小数位数 默认为 0 0 duration 动画持续时间 默认为 2 s 2 delay 延时更新时间, 0 为不延时 0 immediate 是否立即执行动画 true options countup配置项 见下图代码 animateClass 执行期间动画, 执行后删除优先级低于animatedClass null animatedClass 执行前插入, 执行后删除 animated
options{useEasing: true, // 缓动动画 easinguseGrouping: true, // 1,000,000 vs 1000000separator: ,, // 数字分隔符decimal: ., // 小数分隔符prefix: , // 前缀suffix: // 后缀
}20648944
