前端处理留言板默认图片随机切换

最新推荐文章于 2024-10-04 00:46:18 发布

abcdef_520

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量152

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/abcdef_520/article/details/127884681

版权

这个博客展示了如何在Vue.js中创建一个留言板组件。组件使用v-for指令遍历列表，显示带有随机背景图片的留言。背景图片从一个预定义的数组中随机选取，为每个留言提供不同的视觉效果。博客涵盖了前端开发中的Vue组件、图片处理和数据绑定等概念。

摘要由CSDN通过智能技术生成

<template>
   <!-- 留言板 -->
  <div class="text-box">
     <div class="borad" v-for="(item,index) in list" :key="index">
       <!-- 图片 -->
     <img :src="getData()" alt="">
     <div class="borad_text">
       {{item.detail}}
     </div>
   </div>
</div>
</template>

<script>
import bg1 from "@/assets/board_icon/ic_head_1.png";
import bg2 from "@/assets/board_icon/ic_head_2.png";
import bg3 from "@/assets/board_icon/ic_head_3.png";
import bg4 from "@/assets/board_icon/ic_head_4.png";
import bg5 from "@/assets/board_icon/ic_head_5.png";
export default {
    data() {
        return {
          backgroundImage: bg1,
          // 把所有图片放到数组，用于获取下标来获取图片
          imgs: [bg1, bg2, bg3, bg4, bg5],
          img: null,
          list:[
          	{detail:"你好嘛？？"},
          	{detail:"我不好？？"}
          ]
        }
    },
    methods:{
      getData() {
         let name = Math.round(Math.random() * 4);
          // 把随机的图片重新放到backgroundImag
          return this.imgs[name];
      }
    },
}
</script>

<style lang="less" scoped>

</style>