js的vue组件问题

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

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

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>