Vue.js 为什么'；模板文本是否输入新行？

我目前正在编写一些使用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>

谁能告诉我为什么会这样

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

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;

案例“cardAddress”：
str=`address1:${info.carddress.address1}

地址2:${info.carddress.address2}

地址3:${info.carddress.address3}

地址4:${info.carddress.address4}

城市：${info.carddress.city}

国家：${info.carddress.country}

地区：${info.carddress.region}

zipCode:${info.cardAddress.zipCode}

`
返回str；
“到期”案例：
str=`year:${info.expiration.year}

月份：${info.expiration.month}`
返回str；

accountId:3917774
身份证号码：3919374
客户识别码：996774
主要角色
cardStatus:卡\u正常
截短卡号：524304
卡片模板：MC_卡
卡片地址：地址1:Asagayaminami 1-chome
地址2:null
地址3:null
地址4:null
城市：东京
国家：JPN
地区：null
邮编：1660004

用法限制：[{“代码”：“每周”，“值”：null}，{“代码”：“每日”，“值”：[{“代码”：“ATM”，“单笔金额”：200，“计数”：3，“金额”：300}]，{“代码”：“每月”，“值”：[{“代码”：“ATM”，“单笔金额”：null，“计数”：1000，“金额”：1000000}]
有效期：年：2022年
月：1
pinAddress:{“address1”：“Asagayaminami 1-chome”，“address2”：null，“address3”：null，“address4”：null，“city”：“Tokyo”，“country”：“JPN”，“region”：null，“zipCode”：“1660004”}
地区和通信阻塞：{“ecomm”：假，“非洲”：假，“亚洲”：假，“欧洲”：假，“家”：假，“北美洲”：假，“大洋洲”：假，“南美洲”：假}

*****更新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>

导出默认值{
道具：{
信息：对象
},  
方法：{
getData（索引）{
log（'getData已调用'）；
var info=this.info；
var-str=''；
开关（索引）{
案例“cardAddress”：
str=`address1:${info.cardAddress.address1}

地址2:${info.carddress.address2}

地址3:${info.carddress.address3}

地址4:${info.carddress.address4}

城市：${info.carddress.city}

国家：${info.carddress.country}

地区：${info.carddress.region}

zipCode:${info.cardAddress.zipCode}

`
log（'要返回的字符串：'+str）；
返回str；
“到期”案例：
str=`year:${info.expiration.year}

月份：${info.expiration.month}`
log（'要返回的字符串：'+str）；
返回str；
}
console.log（'要返回的字符串：'+this.info[index]）；
返回此.info[索引]；
},
detailedInfo文本（detailedInfo，索引）{
log（'detailedInfoText已调用'）；
log（'detailedInfo:'+detailedInfo）；
console.log（'索引：'+索引）；
如果（详细信息）{
log（'if语句为true'）；
返回`${index}:${this.getData（index）}`；
}否则{
log（'if语句为false'）；
返回`${index}:NULL`；
}
}
}
}

JS中的新行不是HTML中的新行：如果要在HTML中插入新行，需要使用

标记。模板文本只允许您在多行上打断文本，而这不会转换为HTML中的换行符

为了使HTML按原样显示，您需要使用

v-HTML

，而不是使用

v-text

或手柄符号。例如，使用返回字符串的方法执行以下操作：

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

更好的是：您不需要使用

v-if

和

v-else

，而是让方法自己处理要输出的字符串：

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

---

但它只是将

显示为字符串的一部分，正如更新版本中所示。@ShinichiTakagi My bad:您需要使用

v-bind:html

，因为手柄/胡子注释将输出纯文本。现在我看不到任何输出，即使你的解释和代码是有道理的，看起来很有说服力。。。正如您在“updated 2”代码中看到的，我放置了几个console.log语句，所有的值都与我预期的一样。那么，返回呈现的模板文本时，可能出现了问题？@ShinichiTakagi啊，应该是

v-html

指令，而不是

v-bind:html

。试试看。我会更新我的答案。

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

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

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

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