vue.js 组件模板渲染答案

【问题标题】：vue.js component template renderingvue.js 组件模板渲染
【发布时间】：2018-04-30 14:18:39
【问题描述】：

在下面的代码中，我希望所有内容都内联呈现，但事实并非如此。为什么组件是跨度时不内联渲染？

    <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']
      }
    })

【问题讨论】：

您在每个跨度内呈现一个段落标签。

标签： vue.js vue-component

【解决方案1】：

span 元素是 inline 元素，而 p 标签是 block 元素。 p>

你试图在 span 标签内渲染一个段落元素，所以它仍然占据了整个块级别，迫使下一个 span 不是内联的。

【讨论】：