&&youyou 2022-10-25 12: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 13: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月1日
  • 已采纳回答 10月25日
  • 修改了问题 10月25日
  • 修改了问题 10月25日
  • 展开全部

悬赏问题

  • ¥15 使用X11可以找到托盘句柄,监控到窗口点击事件但是如何在监听的同时获取托盘中应用的上下文菜单句柄
  • ¥15 IEd中开关量采样信号通道设计
  • ¥45 字符串操作——数组越界问题
  • ¥15 Loss下降到0.08时不在下降调整学习率也没用
  • ¥15 QT+FFmpeg使用GPU加速解码
  • ¥15 为什么投影机用酷喵播放电影放一段时间就播放不下去了?提示发生未知故障,有什么解决办法吗?
  • ¥15 来个会搭建付费网站的有偿
  • ¥100 有能够实现人机模式的c/c++代码,有图片背景等,能够直接进行游戏
  • ¥20 校园网认证openwrt插件
  • ¥15 以AT89C51单片机芯片为核心来制作一个简易计算器,外部由4*4矩阵键盘和一个LCD1602字符型液晶显示屏构成,内部由一块AT89C51单片机构成,通过软件编程可实现简单加减乘除。
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部