vue.js組件模板渲染

Question

在下面的代碼中，我希望所有內容都可以內聯呈現，但事實並非如此。 為什么跨度時組件未呈內聯顯示？

    <div id='app'>
        <span v-for="ville in nomVilles">
           <span>{{ville}}  </span>
        </span>

       <liste-villes :villes ="nomVilles"></liste-villes>  
    </div>



    Vue.component('liste-villes',{
      template: '<span >\
                   <span v-for="ville in villes">\
                      <p>{{ville}} </p>\
                   </span>\
               </span>  ',
      props: ['villes']
    });

    var vm = new Vue ({
      el:'#app',
      data: {
        nomVilles:['Vancouver','Montreal']
      }
    })

Answer 1

span元素是一個內聯元素，而p標簽是一個block元素。

您試圖在span標簽內呈現一個段落元素，因此它仍占據整個塊級別，從而迫使下一個span不能內聯。