&&youyou 2022-10-25 20:45 采纳率: 100%
浏览 45
已结题

js的vue组件问题

<div id="test">
    <div class="logo-box">
        <div>div_message</div>
        < img src="img_src"/>
    </div>
</div>

怎么才能用vue.js组件的方法简化标签（像上面的），因为上面的这部分代码需要好多遍。

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-10-25 21:01
    关注

    Vue.component注册组件

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://test.thinkfmf.cn/css/test.css">
    </head>
    <body>
        <div id="test">
            <logo-box v-for="src in div_message" :src="src">
            </logo-box>
        </div>
        <script>
            Vue.component('logo-box', {//注册logo-box组件
                props:['src'],
                template:`
            <div class="logo-box">
                <div>div_message</div>
                <img :src="'https://www.thinkfmf.cn/logo/'+src"/>
            </div>`
            })
            var vue = new Vue({
                el: '#test',
                data: { div_message: ['money.png', 'balance.png', 'cardRepay.png', 'cards.png']}
            })
        </script>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 11月2日
  • 已采纳回答 10月25日
  • 修改了问题 10月25日
  • 修改了问题 10月25日
  • 展开全部

悬赏问题

  • ¥15 SQL Server下载
  • ¥15 python如何将动态的多个子列表，拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
  • ¥15 如何实现H5在QQ平台上的二次分享卡片效果？
  • ¥15 python爬取bilibili校园招聘网站
  • ¥30 求解达问题（有红包）
  • ¥15 请解包一个pak文件
  • ¥15 不同系统编译兼容问题
  • ¥100 三相直流充电模块对数字电源芯片在物理上它必须具备哪些功能和性能？
  • ¥30 数字电源对DSP芯片的具体要求