为什么模板文字不换行？

Question

我目前正在编写一些使用 Vue.js 处理卡片信息的练习代码。

在模板部分，通过v-for循环遍历获取到的对象info，然后将获取到的信息打印到屏幕上。

因为info 对象中的一些内容是嵌套对象，所以我想确保这些对象被解析并分解为多行，而不是在一行中将它们作为 JSON 对象打印出来。所以我写了这样的代码。

<template>
    <div id="info-child">
        <div v-for="(detailedInfo,index) in info" :key="index">                                           
            <p v-if="detailedInfo"> {{index}} : {{ getData(index) }} </p>    
            <p v-else> {{index}} : NULL </p>  
        </div>     
    </div>
</template>

<script>
export default {
    props: {              
        info: Object
    },  
    methods: {
        getData(index) {
            var info = this.info;
            var str = '';
            switch(index){
                case 'cardAddress':
                    str = `address1: ${info.cardAddress.address1}
                           address2: ${info.cardAddress.address2}
                           address3: ${info.cardAddress.address3}
                           address4: ${info.cardAddress.address4}
                           city: ${info.cardAddress.city}
                           country: ${info.cardAddress.country}
                           region: ${info.cardAddress.region}
                           zipCode: ${info.cardAddress.zipCode}
                           `
                    return str;
                case 'expiration':
                    str = `year: ${info.expiration.year}                  
                           month: ${info.expiration.month}`
                    return str;
            }
            return this.info[index];
        }
    }
}
</script>

如以下文档中所述，如果您使用模板文字，只需在 ` ` 标记之间写入多行就足够了，它们将显示为多行。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

然而，与我的预期相反，我应该通过getData() 方法过滤的cardAddress 和expiration 实际上都显示在单行中，如下面的输出所示。

accountId : 3917774

id : 3919374

customerId : 996774

cardRole : MAIN

cardStatus : CARD_OK

truncatedCardNumber : 524304______5314

cardTemplate : MC_CARD

cardAddress : address1: Asagayaminami 1- chome address2: null address3: null address4: null city: Tokyo country: JPN region: null zipCode: 1660004

usageLimits : [ { "code": "WEEKLY", "values": null }, { "code": "DAILY", "values": [ { "code": "ATM", "singleAmount": 200, "count": 3, "sumAmount": 300 } ] }, { "code": "MONTHLY", "values": [ { "code": "ATM", "singleAmount": null, "count": 1000, "sumAmount": 1000000 } ] } ]

expiration : year: 2022 month: 1

pinAddress : { "address1": "Asagayaminami 1- chome", "address2": null, "address3": null, "address4": null, "city": "Tokyo", "country": "JPN", "region": null, "zipCode": "1660004" }

regionAndEcommBlocking : { "ecomm": false, "africa": false, "asia": false, "europe": false, "home": false, "northAmerica": false, "oceania": false, "southAmerica": false }

谁能告诉我为什么会这样？

*****更新*****

case 'cardAddress':
    str = `address1: ${info.cardAddress.address1} <br />
           address2: ${info.cardAddress.address2}  <br />
           address3: ${info.cardAddress.address3}  <br />
           address4: ${info.cardAddress.address4}  <br />
           city: ${info.cardAddress.city}  <br />
           country: ${info.cardAddress.country}  <br />
           region: ${info.cardAddress.region}  <br />
           zipCode: ${info.cardAddress.zipCode}  <br />
           `
    return str;
case 'expiration':
    str = `year: ${info.expiration.year}      <br />             
           month: ${info.expiration.month}`
    return str;

accountId : 3917774

id : 3919374

customerId : 996774

cardRole : MAIN

cardStatus : CARD_OK

truncatedCardNumber : 524304______5314

cardTemplate : MC_CARD

cardAddress : address1: Asagayaminami 1- chome <br /> address2: null <br /> address3: null <br /> address4: null <br /> city: Tokyo <br /> country: JPN <br /> region: null <br /> zipCode: 1660004 <br />

usageLimits : [ { "code": "WEEKLY", "values": null }, { "code": "DAILY", "values": [ { "code": "ATM", "singleAmount": 200, "count": 3, "sumAmount": 300 } ] }, { "code": "MONTHLY", "values": [ { "code": "ATM", "singleAmount": null, "count": 1000, "sumAmount": 1000000 } ] } ]

expiration : year: 2022 <br /> month: 1

pinAddress : { "address1": "Asagayaminami 1- chome", "address2": null, "address3": null, "address4": null, "city": "Tokyo", "country": "JPN", "region": null, "zipCode": "1660004" }

regionAndEcommBlocking : { "ecomm": false, "africa": false, "asia": false, "europe": false, "home": false, "northAmerica": false, "oceania": false, "southAmerica": false }

*****已更新 2*****

<template>
    <div id="info-child">
        <div v-for="(detailedInfo,index) in info" :key="index">
            <p v-bind:html="detailedInfoText(detailedInfo, index)"></p>
        </div>
    </div>
</template>

<script>
export default {
    props: {              
        info: Object
    },  
    methods: {
        getData(index) {
            console.log('getData got called');
            var info = this.info;
            var str = '';
            switch(index){
                case 'cardAddress':
                    str = `address1: ${info.cardAddress.address1} <br>
                           address2: ${info.cardAddress.address2}  <br>
                           address3: ${info.cardAddress.address3}  <br>
                           address4: ${info.cardAddress.address4}  <br />
                           city: ${info.cardAddress.city}  <br />
                           country: ${info.cardAddress.country}  <br />
                           region: ${info.cardAddress.region}  <br />
                           zipCode: ${info.cardAddress.zipCode}  <br />
                           `
                    console.log('The string to be returned: ' + str);
                    return str;
                case 'expiration':
                    str = `year: ${info.expiration.year}      <br />             
                           month: ${info.expiration.month}`
                    console.log('The string to be returned: ' + str);
                    return str;
            }
            console.log('The string to be returned: ' + this.info[index]);
            return this.info[index];
        },
        detailedInfoText(detailedInfo, index){
            console.log('detailedInfoText got called');
            console.log('detailedInfo: ' + detailedInfo);
            console.log('index: ' + index);
            if(detailedInfo){
                console.log('if statement is true');
                return `${index}: ${this.getData(index)}`;
            } else {
                console.log('if statement is false');
                return `${index}: NULL`;
            }
        }
    }
}
</script>

Answer 1

JS 中的换行不是 HTML 中的换行：如果要在 HTML 中插入换行，则需要使用 <br /> 标签。模板字面量只是允许您将文本分成多行，并且不会转换为 HTML 中的换行符。

为了使 HTML 按原样显示，您需要使用 v-html 而不是使用 v-text 或 handlerbars 表示法。一个示例是使用返回字符串的方法来执行此操作：

<p v-if="detailedInfo" v-html="detailedInfoText"></p>

然后方法可以是这样的：

methods: {
  detailedInfoText: function(index) {
    return `${index}: ${this.getData(index)}`;
  }
}

更好的是：您不需要使用v-if 和v-else，而让方法自己处理要输出的字符串：

<p v-html="detailedInfoText(detailedInfo)"></p>

然后在你的 JS 逻辑中：

methods: {
  detailedInfoText: function(detailedInfo, index) {
    if (detailedInfo) {
        return `${index}: ${this.getData(index}`;
    } else {
        return `${index}: NULL`;
    }
  }
}