Vue修剪白色空间

Question

我正在我的应用程序上使用vue.js,当显示一些内容时,当单词之间有多个空格时,vue会删除空格.不幸的是,我无法在小提琴上重现这一点(不知道为什么).我不熟悉vue(我更像是一个后端),所以我很抱歉缺乏细节.要显示的HTML代码如下:<div slot="body" v-html="viewingEmail.message"></div>.示例内容可以是具有两个空格的任何短语,例如:Hello, how are you?.在这种情况下,应用程序将显示Hello,how are you?

我们的vue依赖项是:

"vue": "^2.4.2",
"vue-cookie": "^1.1.4",
"vue-flatpickr": "^2.3.0",
"vue-js-toggle-button": "^1.1.2",
"vue-loader": "^11.3.4",
"vue-resource": "^1.0.3",
"vue-select": "^2.2.0",
"vue-slider-component": "^2.3.6",
"vue-star-rating": "^1.4.0",
"vue-template-compiler": "^2.4.2",
"vue2-dropzone": "^2.2.7",
"vuedraggable": "^2.15.0",
"vuejs-paginate": "^1.1.0",
"vuex": "^2.2.1",

Answer 1

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实体替换空间字符,但这会弄乱嵌套元素的属性.

我的建议: 使用white-space: pre-wrap;风格.

见下面的演示.

new Vue({
  el: '#app',
  data: {
    message: 'Hello,    Vue.js!'
  }
})

.keep-spaces { white-space: pre-wrap; }

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <h3>With "white-space:pre-wrap;" 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>