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-selector，但有些元素只是没有唯一的选择器，所以我通过文本获取它们。

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" />

请注意自动关闭的，它不是必需的，但更多的是表明该元素没有内部标记。

Answer 2

使用trim删除空格怎么样？

null

let str = '   example ';

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