用vue js中的新行替换空间

Question

我试图在vuejs中将名称之间的空格替换为新行，但我无法实现。请帮我找出哪里出了问题。现在名字显示为

Jack William

但我想把它显示为

Jack
William

下面是密码。

<template>
  <div>
      <v-container fluid>
        <v-layout row wrap>
          <v-flex xs12 sm12 md2 v-for='user in users'>
            <v-card>
              <v-card-title>{{ formatUserName(user.name) }}</v-card-title>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      users: []
    }
  },
  created: function() {
    this.fetchUsers()
  },
  methods: {
    formatUserName(value) {
      debugger
      return value.replace(/\s/g, '\n')
    },
    fetchUsers() {
      this.$axios.get('/users.json')
        .then(response => {
          this.users = response.data;
        });
    },
  }
}
</script>

Answer 1

在word-spacing设置为高值的情况下，完全可以在CSS中这样做：

1. 在one-word-per-line上设置一个<v-card-text>类。 {{ user.name }
2. 为该类添加一个style，将word-spacing设置为100vw。 .每行一字{字间距:100 per；}

演示

Answer 2

您只需使用CSS并将white-space: pre;应用于内容：

<v-card-title style="white-space: pre">{{ formatUserName(user.name) }}</v-card-title>