我在我的应用程序上使用了vue.js,当显示某些内容时,如果单词之间有多个空格,则vue会删除空格。不幸的是,我无法在小提琴上重现这一点(不知道为什么)。我不熟悉vue(我更像是一个后端),所以我很抱歉缺乏细节。要显示的HTML代码如下:var results = JSON.parse(data.body).results;
var geoPromises = [];
for (var i in results) {
var promise = getGeo(results[i].location[1], results[i].location[0]);
geoPromises.push(promise);
}
Promise.all(geoPromises).then(vs => {
res.send(vs);
});
。示例内容可以是具有两个空格的任何短语,例如:<div slot="body" v-html="viewingEmail.message"></div>
。在这种情况下,应用会显示Hello, how are you?
我们的vue依赖项是:
Hello,how are you?
答案 0 :(得分:8)
Vue没有修剪空间。这就是HTML的工作原理。
空间在那里,见下面的演示。
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
mounted() {
console.log('Notice how the spaces exist in HTML, even though they are not displayed.');
console.log('divHTML', this.$refs.divHTML.outerHTML);
console.log('divTEXT', this.$refs.divTEXT.outerHTML);
}
})
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<div id="app">
v-html: <div v-html="message" ref="divHTML"></div>
v-text: <div v-text="message" ref="divTEXT"></div>
</div>
你可以用
HTML实体替换空格字符,但这会弄乱嵌套元素的属性。
我的建议: use white-space: pre;
style。
见下面的演示。
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
}
})
.keep-spaces { white-space: pre; }
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<h3>With "white-space:pre;" spaces are preserved visually.</h3>
v-html: <div v-html="message" class="keep-spaces"></div>
v-text: <div v-text="message" class="keep-spaces"></div>
</div>