gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 05:56:51 24 4
gpt4 key购买 nike

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

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

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

<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();
},

最佳答案

一切都非常简单。只需随机化您在 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>

关于javascript - 如何在 Vue.js 中获取随机元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45752960/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com