Vue修剪白色空间

时间:2018-03-16 21:33:09

标签: javascript html vue.js

我在我的应用程序上使用了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?

1 个答案:

答案 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>

你可以用&nbsp; 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>