Como consigo que a exibição da lista se torne pausada,
exemplo espera 1 segundo exibe:
1 + 1 segundo 2 + 1 segundo 3
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
usei o setTimeout no created mais não deu certo.
Como consigo que a exibição da lista se torne pausada,
exemplo espera 1 segundo exibe:
1 + 1 segundo 2 + 1 segundo 3
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
usei o setTimeout no created mais não deu certo.
Para controlares isso tens de mudar o que o Vue usa para iterar, ou seja cria uma array e vai mudando a array à velocidade que precisas para ter o efeito desejado:
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var demo = new Vue({
el: '#demo',
data() {
return {
arr: arr.slice(0, 1),
showUpTo: 1,
}
},
mounted() {
const timer = setInterval(() => {
this.showUpTo++;
this.arr = arr.slice(0, this.showUpTo);
if (this.showUpTo === arr.length) clearInterval(timer);
}, 1000);
}
});
<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<div>
<p v-for="n in arr">{{ n }} </p>
</div>
</div>
A mesma coisa mas com uma propriedade computed
:
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var demo = new Vue({
el: '#demo',
data() {
return {
showUpTo: 1,
}
},
computed: {
arr() {
return arr.slice(0, this.showUpTo);
}
},
mounted() {
const timer = setInterval(() => {
this.showUpTo++;
if (this.showUpTo === arr.length) clearInterval(timer);
}, 1000);
}
});
<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<div>
<p v-for="n in arr">{{ n }} </p>
</div>
</div>