• vue实现瀑布流


    1、在 src 目录下创建 component文件夹,在文件夹中创建 vue文件。

    2、在 Vue文件中写入以下内容

    1. class="pubu">
    2. <div class="left">
    3. <div class="pubu-item" v-for="item in left" :key="item.id">
    4. <img
    5. @error="isError($event)"
    6. :src="store.state.url + item.img"
    7. alt=""
    8. />
    9. <h3>{{ item.title }}h3>
    10. <p>{{ item.content }}p>
    11. div>
    12. div>
    13. <div class="right">
    14. <div class="pubu-item" v-for="item in right" :key="item.id">
    15. <img
    16. @error="isError($event)"
    17. :src="store.state.url + item.img"
    18. alt=""
    19. />
    20. <h3>{{ item.title }}h3>
    21. <p>{{ item.content }}p>
    22. div>
    23. div>
  • 3、在需要使用的页面中引入这个组件

    1. import Waterfall from "@/components/Waterfall.vue";
    2. <template>
    3. <Waterfall v-if="data.president.length > 0":lists="data.president">Waterfall>
    4. template>

    4、最终效果:

    原创作者:吴小糖

    创作时间:2023.10.12 

     

  • 相关阅读:
    理解HTTP、HTTPS、TCP、UDP与OSI七层模型:网络访问的基础
    EFDC模型教程
    【7 Vue3 – Composition API】
    kafka随笔
    C++中的extern “C”用法笔记
    在C#中,如何以编程的方式设置 Excel 单元格样式
    Windows电脑安装Python结合内网穿透轻松搭建可公网访问私有网盘
    ElementUI修改主题色
    深度搜索解决数独游戏
    mac真的安装不了vmware吗 mac如何安装crossover crossover序列号从哪里买 购买正版渠道
  • 原文地址:https://blog.csdn.net/xiaowude_boke/article/details/133781257