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

Question

我有 3 张主图及其内容，我想在用户刷新页面时随机显示它们！

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

在 Vue.js 中是否有任何解决方案可以在用户刷新页面时一次加载一个特定的 div，而不是全部 3 个 divs！？

<div class="slider-item"> <img src="../../../static/img/slides/slide1.png" alt="Hello"> 
       <div class="carousel-caption"> 
           <h2>Lipsum Heading</h2> 
               <h4>Lipsum dummy content body test dummy goes here.</h4> 
       </div> 
   </div>

jQuery 代码：

mounted()
{
 var random = Math.floor(Math.random() * $('.slider-item').length);
 $('.slider-item').eq(random).show();
},

Answer 1

你可以这样做：

html

<div id="hero-bg">
    <img :src="currentBgPath">
</div>

脚本

new Vue({
    el: '#hero-bg',
    data:{
        heroBgPaths: [
            '../path/to/img1',
            '../path/to/img2',
            '../path/to/img3'
        ],
        currentBgPath: null
    },
    created(){

        var random = Math.floor(Math.random() * this.heroBgPaths.length);
        this.currentBgPath = this.heroBgPaths[random];
    }
})

• 将图像的路径初始化为数据属性中的数组

• 初始化一个数据属性currentBgPath并设置为null

• 在创建的生命周期钩子中使用获取图像路径数组中项目数内的随机数

  var random = Math.floor(Math.random() * this.heroBgPaths.length);
  

• 使用this.currentBgPath = this.heroBgPaths[random];设置currentBgPath的值，并将img元素的src属性绑定到currentBgPath

Answer 2

一切都很简单。只需随机化您在 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]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <img v-bind:src="selectedImage" />
</div>