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

Question

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

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

在上面的行中，我试图在一行中获取名字和姓氏，在下一行中获取 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>