vue-countTo is a non-dependency, lightweight vue component that can realize the scrolling effect of numbers
| Attributes | description | Types of | Defaults |
|---|---|---|---|
| startVal | Start value | Number | 0 |
| endVal | End value | Number | 2017 |
| duration | Duration in milliseconds | Number | 3000 |
| autoplay | Autoplay | Boolean | true |
| decimals | The number of decimal places to display | Number | 0 |
| decimal | Decimal division | String | . |
| separator | Delimiter | String | , |
| prefix | Prefix | String | ‘’ |
| suffix | suffix | String | ‘’ |
| useEasing | Use easing function | Boolean | true |
| easingFn | Easing callback | Function | — |
Note: When autoplay: true, it will automatically start when startVal or endVal is changed
function function
| Function name | description |
|---|---|
| mountedCallback | Return callback after mounting |
| start | Start counting |
| pause | Pause count |
| reset | Reset countTo |
Example:
<head>
<meta charset="utf-8" />
<title>countTo</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="xdlove-vue-countTo-master/vue-countTo/dist/vue-count-to.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="aaa">
<count-to class="example1" style="font-size:40px;" :start-val=0 :end-val=endnums :duration=3000></count-to>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#aaa",
data:{
startnums:30,
endnums:100,
},
mounted:function(){
},
methods:{
}
})
</script>
</body>
Effect:
vue-routerTo can be effective in most browsers.
Learn together and make progress together -.-, if you make a mistake, you can post a comment