Last active
September 4, 2018 03:23
-
-
Save 1c7/7267d5789eb9883c7883fc0dfe7b78fd to your computer and use it in GitHub Desktop.
Vue, v-for, display special element in certain position
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This is written in Pug syntax. not HTML. but same thing. Pug would compile to HTML | |
| template(v-for='(l, index) in list') | |
| topic-card(:topic='t', :key='t.id') | |
| template(v-if='index == 2') | |
| // [IMPORTANT: display your specifial element here] |
The point here is
use v-for + template syntax in Vue.js
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What is this
Code snippet show you how to display a list with a element in certain position.
For example: you have a card layout.
one row have 4 card.
now you want display an Ad in first row, number 4 position(left to right). you can use this.
Why
it's a simple task. I overcomplicate it with Flex layout, trying to use
orderproperty.and later I come up with this.
it only take me 2 minute to share it on Github gist. so I post it here.
hope it helpful for you