如果你要在循环中提取 item.companyName
中的数字,并且希望为这些数字改变颜色和边距,可以对每个 item
进行处理。此处是一个实现示例:
<template>
<div>
<div class="box" v-for="(item, index) in coldBaseInfo.stationModelList" :key="index">
<div class="boxright">
<div class="companyName">
<span v-html="formatCompanyName(item.companyName)"></span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
coldBaseInfo: {
type: Object,
required: true,
},
},
methods: {
formatCompanyName(companyName) {
// 正则表达式提取数字
const numberPattern = /\d+/g;
// 使用 replace 生成带样式的 HTML
return companyName.replace(numberPattern, (match) => {
return `<span style="color: red; margin-left: 5px;">${match}</span>`;
});
},
},
};
</script>
<style scoped>
.box {
/* 盒子的样式 */
}
.boxright {
/* 右边内容的样式 */
}
.companyName {
/* 公司名称的样式 */
}
</style>
代码解释:
-
模板部分:
- 通过
v-for
循环遍历coldBaseInfo.stationModelList
。每一项的companyName
被传入formatCompanyName
方法处理。 - 使用
v-html
指令将处理后的结果渲染到页面中。这允许你将带有样式的HTML代码插入。
- 通过
-
计算方法:
formatCompanyName
方法接收companyName
,使用正则表达式/\d+/g
提取其中的数字。replace
方法用于将提取到的数字替换为一个带有样式的<span>
标签,这里设置了红色字体和适当的左边距。
-
样式:
- 在
<style>
标签内部,可以为盒子及其他元素添加合适的样式。
- 在
注意事项:
- 请确保
companyName
中的数字不会为空。此代码仅适用于各companyName
中含有数字的情况。 - 使用
v-html
时要小心潜在的XSS攻击,确保传入的字符串是安全的且没有恶意代码。如果你不放心,也可以考虑其他方法,比如使用字符串拼接和 Vue 的:style
与:class
。