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在不使用格式的情况下渲染文本而不使用格式，这意味着在不同的行上打开和关闭标记？(我并不是唯一在这个项目上工作的人)或者，我是否可以强制格式化，如上一个例子所示？我们目前正在使用ESLint和Prittier，但是经过彻底的搜索，我找不到适合我的用例的任何东西。

谢谢!

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

Package.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

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

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

注意自动关闭的<span />，它不是必需的，但更多地表明这个元素没有内部标记。

Answer 2

使用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>

​