0.1.0 • Published 3 years ago
vue-loop-helper v0.1.0
VueLoop
A loop helper plugin inspired by Blade.
Installation
1. Install
yarn add vue-loop-helper
# or
npm i vue-loop-helper --save2. Plug-in
import VueLoop from 'vue-loop-helper'
Vue.use(VueLoop)3. Use in your components
<template>
<div v-for='item in items'>
{{ $loop.index }}
{{ $loop.count }}
{{ $loop.first }}
{{ $loop.last }}
{{ item }}
</div>
</template>
<script>
export default {
data () {
return {
items: [
'foo',
'bar',
'baz'
]
}
}
};
</script>Helpers
| Property | Description |
|---|---|
| $loop.index | The index of the current loop iteration (starts at 0). |
| $loop.iteration | The current loop iteration (starts at 1). |
| $loop.remaining | The iterations remaining in the loop. |
| $loop.count | The total number of items in the array being iterated. |
| $loop.first | Whether this is the first iteration through the loop. |
| $loop.last | Whether this is the last iteration through the loop. |
| $loop.even | Whether this is an even iteration through the loop. |
| $loop.odd | Whether this is an odd iteration through the loop. |
| $loop.depth | The nesting level of the current loop. |
| $loop.parent | When in a nested loop, the parent's loop variable. |
Credits
The implementation of this module is inspired by Laravel (Blade)
License
MIT