js的vue组件问题

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

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

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>

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632