javascript - Vue trim 空格

Question

我在我的应用程序上使用 vue.js，当显示某些内容时，当单词之间有多个空格时，vue 会删除空格。不幸的是我不能用 fiddle 重现这个(不知道为什么)。我对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 不会 trim 空格。这就是 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-wrap; style .

请参阅下面的演示。

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>