将数字显示为 vue js 中 v-select 插槽的 selected 项目中的下标

Question

我在 Vue 项目中使用 v-select 从化学品和氧化物列表中 select，我只想显示 selected 项目与数字下标只喜欢附图 :

我的代码是:

<v-select v-model="elements" class="form-control text-left" :items="chemicals"></v-select>

化学品:

["Ag","Al2O3","Al2O3/(CaO+MgO+K2O+Na2O)","As","Au","Ba","BaO","Be","Bi","Br","Ca","CaO","Cd","Ce","Cl","Cl","Co","CO2","Cr","Cr2O3","Cs","Cu","Dy","SO3","SO4","Sr","SrO","Ta","Tb","Th","Ti","TiO2","Tl",]

Answer 1

您可以将所有数字替换为单独的下标字符：

创建下标 Unicode 字符数组（例如，命名为 subscripts）（\u2080 代表 0，通过 u2089 代表 9).这允许通过使用数字作为下标数组的索引（即 subscripts[3] = '\u2083'）将给定数字映射到下标字符。
使用 String.prototype.replace() with a replacer function 将任何数字转换为下标。

const subscripts = [
  '\u2080',
  '\u2081',
  '\u2082',
  '\u2083',
  '\u2084',
  '\u2085',
  '\u2086',
  '\u2087',
  '\u2088',
  '\u2089',
]

const ELEMENTS = ["Ag","Al2O3","Al2O3/(CaO+MgO+K2O+Na2O)","As","Au","Ba","BaO","Be","Bi","Br","Ca","CaO","Cd","Ce","Cl","Cl","Co","CO2","Cr","Cr2O3","Cs","Cu","Dy","SO3","SO4","Sr","SrO","Ta","Tb","Th","Ti","TiO2","Tl"]

const elements = ELEMENTS.map(name => {
  return name.replace(/\d/g, (num) => subscripts[Number(num)])
})

demo

将数字显示为 vue js 中 v-select 插槽的 selected 项目中的下标

Display numbers as subscript in selected items from v-select slot in vue js

html

javascript

vue.js

vuetify.js