如何让绑定数据在同一行显示？合并标签后无内容显示

嘿，我来帮你搞定这个日期同行显示的问题！想要实现2018-01-01 - 2018-01-07这种效果，得看你用的是什么前端技术栈，下面给你几种常见场景的解决方案：

1. Vue 场景 #

如果是用Vue开发，你可以直接在同一个行内标签里拼接两个绑定值和分隔符，注意要用正确的插值语法：

<span>{{ startDate }} - {{ endDate }}</span>

你之前把第二个绑定移到第一个标签没显示，大概率是语法写错了——比如漏了双大括号、变量名拼写错误，或者变量没在Vue实例的data里正确定义，仔细检查下这些细节就行。

2. React 场景 #

React里用JSX语法，直接在标签里拼接变量和分隔符即可：

<span>{startDate} - {endDate}</span>

要确保startDate和endDate是组件的state或props中存在的有效变量哦。

3. 原生 JavaScript 场景 #

如果是原生JS开发，你可以通过DOM操作把两个值插入到同一个元素中：

const startDate = '2018-01-01';
const endDate = '2018-01-07';
const dateContainer = document.getElementById('date-wrap');
dateContainer.textContent = `${startDate} - ${endDate}`;

对应的HTML结构：

<span id="date-wrap"></span>

不管哪种情况，核心都是把两个数据值和分隔符放在同一个行内元素（比如<span>，或者设置了display: inline的<div>）里，这样就能保证它们在同一行显示啦。

内容的提问来源于stack exchange，提问作者Lasse Edsvik