javascript – 如何在Vue.js中获取随机元素

前端之家收集整理的这篇文章主要介绍了javascript – 如何在Vue.js中获取随机元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有3个英雄图像及其内容,我想在用户刷新页面随机显示它们!

基本上我试图在加载页面上使用Jquery显示随机div,但问题是英雄图像的大小很大并且通过使用Jquery,所有这3个图像开始在DOM中加载,这会影响页面的速度.

在Vue.js中是否有任何解决方案,一次加载一个特定的div,而不是当用户刷新页面时所有3个div!

jQuery代码

mounted()
{
 var random = Math.floor(Math.random() * $('.slider-item').length);
 $('.slider-item').eq(random).show();
},
最佳答案
一切都很直接.只需随机化您在Vue中选择的链接即可.

const app = new Vue({
  el: '#app',data: {
    images: [
      'http://via.placeholder.com/350x150','http://via.placeholder.com/200x140','http://via.placeholder.com/200x100'
    ],selectedImage: ''
  },created () {
    const idx = Math.floor(Math.random() * this.images.length);
    this.selectedImage = this.images[idx]
  }
});

猜你在找的jQuery相关文章