Vuejs 在 HTML 中渲染多余的空格

Question

我在使用 Vue 渲染字符串时遇到问题。 目前，如果 HTML 标记在不同的行上打开和关闭，例如

<span class="description">
    {{ text }}
</span>

渲染如下

<span class="description">
            text
          </span>

这导致document.querySelector('.description').textContent 返回包含冗余空格的字符串。例如

"
          Text
        "

我发现如果您在同一行打开和关闭包含字符串的 HTML 标记，问题就消失了。例如

<span class="description">{{ text }}</span>

问题：我能否以某种方式强制 Vue 在没有额外空格的情况下呈现文本没有格式化所有实际的 HTML，这意味着在不同的行上打开和关闭标签？ （我不是一个人在做这个项目） 或者，我可以以某种方式强制格式化，如上一个示例所示？我们目前正在使用 ESLint 和 Prittier，但经过彻底搜索后，我找不到任何适合我用例的东西。

谢谢！

更多上下文： 为什么我关心那些空间？在我们的 selenium 测试中，我有时会通过文本找到元素，而拥有这些空格则不可能。此外，我知道我可能会使用 css-selectors，但有些元素没有唯一的选择器，所以我通过文本获取它们。

包.json

  "dependencies": {
    "axios": "^0.18.0",
    "element-theme": "^2.0.1",
    "element-theme-chalk": "^2.4.11",
    "element-ui": "^2.13.0",
    "jwt-decode": "^2.2.0",
    "md5": "^2.2.1",
    "memoizee": "^0.4.14",
    "sass-loader": "^7.1.0",
    "sortablejs": "^1.10.2",
    "sweetalert2": "^8.16.3",
    "v-calendar": "^1.0.0-beta.23",
    "vue": "^2.6.11",
    "vue-flag-icon": "^1.0.6",
    "vue-i18n": "^8.8.0",
    "vue-json-pretty": "^1.6.3",
    "vue-tour": "^1.3.0",
    "vuedraggable": "^2.23.2",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "axios-mock-adapter": "^1.17.0",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "bee-plugin": "^1.3.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^6.0.1",
    "eventsource-polyfill": "^0.9.6",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "google-maps-api-loader": "^1.0.0",
    "html-inject-script": "^2.0.0",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^21.2.0",
    "jest-serializer-vue": "^0.3.0",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "lodash": "^4.17.20",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.26",
    "nightwatch": "^1.0.11",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "prettier": "^1.19.1",
    "raven-js": "^3.22.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "svg-sprite-loader": "^3.6.2",
    "svgo": "^1.0.4",
    "svgo-loader": "^2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^0.5.8",
    "v-click-outside": "^1.0.1",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-router": "^3",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },

.prettierrc

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "htmlWhiteSpaceSensitivity": "ignore"
}

.eslintrc.js

// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module"
  },
  env: {
    browser: true,
    jquery: true
  },
  extends: [
    "plugin:prettier/recommended",
    "plugin:vue/recommended",
    "prettier/vue",
    "standard",
  ],
  plugins: ["vue"],
  rules: {
    "space-before-function-paren": "off",

    "vue/require-default-prop": "off",
    "vue/require-prop-types": "off",
    "vue/attributes-order": "off",
    "vue/order-in-components": "off",
    "vue/no-v-html": "off",
    "vue/require-v-for-key": "off",
    "vue/no-use-v-if-with-v-for": "off",
    "vue/return-in-computed-property": "off",
    "vue/require-valid-default-prop": "off",
    "vue/no-side-effects-in-computed-properties": "off",
    "vue/no-duplicate-attributes": "off",
    "vue/no-async-in-computed-properties": "off",
    "vue/mustache-interpolation-spacing": "error",
  }
};

Answer 1

使用trim 去除空格怎么样？

let str = '   example ';

console.log(str.trim(), str);

let desc = document.getElementsByClassName('description')[0];

console.log(desc.textContent, desc.textContent.trim());

<span class="description">
            text
          </span>

Answer 2

不确定您的实际情况是否如此简单，但对于不包含额外标记的标签，我会尽可能使用v-text：

<span class="description" v-text="text" />

请注意自动关闭的<span />，这不是必需的，但更说明此元素没有内部标记。