title: How to get random element in Vue.js
body: <p>I have 3 hero images and their content and I want to display them randomly when user refreshes the page!</p>
  
  <p>Basically I am trying to display random div using Jquery on loading page, but issue is that the size of hero image is large and by using <code>Jquery</code>, all these 3 images start loading in <code>DOM</code> which affects the speed of page.</p>
  
  <p>Is there any solution for this in Vue.js for loading that one specific <code>div</code> at a time, not all 3 <code>divs</code> when user refreshes the page!?</p>
  
  <pre><code>&lt;div class="slider-item"&gt; &lt;img src="../../../static/img/slides/slide1.png" alt="Hello"&gt; 
         &lt;div class="carousel-caption"&gt; 
             &lt;h2&gt;Lipsum Heading&lt;/h2&gt; 
                 &lt;h4&gt;Lipsum dummy content body test dummy goes here.&lt;/h4&gt; 
         &lt;/div&gt; 
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery Code:</strong></p>
  
  <pre><code>mounted()
  {
   var random = Math.floor(Math.random() * $('.slider-item').length);
   $('.slider-item').eq(random).show();
  },
  </code></pre>