vue.js - vue.js 组件模板渲染
问题描述
在下面的代码中,我希望所有内容都内联呈现,但事实并非如此。为什么当它是跨度时组件不内联渲染?
<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']
}
})
解决方案
span元素是内联元素,而p标签是块元素。
您正在尝试在 span 标记内呈现段落元素,因此它仍会占用整个块级别,从而强制下一个 span 不是内联的。
推荐阅读
- npm - 如何将 Specflow 测试结果转换为 Cucumber Messages 格式
- c++ - 如何使用 QUdpSocket 写入端口 0?
- python - 如何将excel文件中的像素值转换为图像?
- javascript - REACT NATIVE:如何在 FlatList 中显示数据?
- nlp - 使用 NLP 查找常见的工作资格
- symfony - EasyAdmin 3 Symfony 5
- python - 我如何在抓取应用程序中正确转换日期?
- python - (discord.py) bot 在尝试调用用户定义的函数时没有属性错误
- html - Flexbox 可以在 Firefox 上运行,但不能在 Edge 上运行?
- linux - 需要解锁哪些 IP 地址/网站才能在防火墙后面运行的服务器上安装和运行 jenkins