字符串内某个字符单独设置样式

Question

<van-cell :border="false" title="使用券" :value="`当前可使用${quanList.length}张券`" is-link >

想给value里${quanList.length}单独设置一个颜色，有办法做到吗？

Answer 1

�PEACH? 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

要在字符串内的特定字符单独设置样式，你可以使用HTML标签来实现。

在Vue模板中，可以使用v-html指令来渲染包含HTML标签的字符串。

以下是可以实现这个效果的解决方案：

1. 将value属性中的字符串拆分成两部分，一个是${quanList.length}之前的部分，另一个是${quanList.length}之后的部分。
2. 使用<span>标签包裹${quanList.length}，并为该标签设置特定的样式。
3. 使用v-html指令渲染拼接好的字符串。

修改后的代码如下：

<van-cell :border="false" title="使用券" :value="getValue()" is-link></van-cell>

methods: {
  getValue() {
    const quanCount = quanList.length;
    const beforeText = '当前可使用';
    const afterText = '张券';
    const coloredText = `<span style="color: red">${quanCount}</span>`;
    return `${beforeText}${coloredText}${afterText}`;
  }
}

这样，${quanList.length}部分就会被设置为红色。

注意：HTML标签中的样式需要使用style属性进行设置，可以根据需要自行调整。

希望对你有帮助！