Vue.js：带换行符的字符串插值答案

【问题标题】：Vue.js: string interpolation with line breakVue.js：带换行符的字符串插值
【发布时间】：2021-02-11 19:17:48
【问题描述】：

我无法在我的HTML 中打印出的字符串插值换行

this.externalUsers = data.externalUser.map(element => `Name: ${element.firstName} ${element.lastName}\n <br><br />Email: ${element.email}`);

在上面的行中，我试图在一行中获取名字和姓氏，并在下一行获取电子邮件

<v-radio 
  v-for="item in externalUsers" 
  :key="item.id"
  :label="item"
  :value="item"
></v-radio>

我正在使用 Vue，所以我使用 for 循环将其打印出来。

这是结果

【问题讨论】：

你不需要<br/>; <br> 标签始终是无内容标签，因此只需 <br> 就足够了。
stackoverflow.com/questions/52874920/…
空白字符（如换行、回车和制表符）在添加到 DOM 时被标准化为空格或被删除。字符串中的 \n 什么都不做。 Vue 可能会在渲染 HTML 之前对其进行清理；我敢肯定有一个关于解决这个问题的问题...

标签： javascript vue.js line-breaks string-interpolation

【解决方案1】：

你可以使用white-space: pre-line;如下：

new Vue({
  el:"#app",
  vuetify: new Vuetify(),
  data: () => ({
    externalUser: [
      { firstName: 'firstName1', lastName: 'lastName1', email: 'email1' },
      { firstName: 'firstName2', lastName: 'lastName2', email: 'email2' },
      { firstName: 'firstName3', lastName: 'lastName3', email: 'email3' },
    ]
  }),
  computed: {
    externalUsers() {
      return this.externalUser.map(element => 
        `Name: ${element.firstName} ${element.lastName}\nEmail: ${element.email}`);
    }
  }
});

#app { white-space: pre-line; }

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <v-radio-group>
    <v-radio 
      v-for="item in externalUsers" 
      :key="item.id"
      :label="item"
      :value="item"
    ></v-radio>
  </v-radio-group>
</v-app>

【讨论】：