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

Question

我无法在 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 循环打印出来。

这是结果

Answer 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>

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

Vue.js: string interpolation with line break

javascript

line-breaks

string-interpolation

vue.js