[JavaScript知识库]Vue项目 想在html部分的循环使用字符串模板，解决方法

data里有blueNum、pinkNum、redNum变量，item值是’blue’,‘pink’,‘red’，本来是想这样写来展示：

<div :class="`ball${index} ball`" v-for="(item, index) in ballMap" :key="item" @click="handleShowCall(item)">
		 <span> {{ this[`${item}Num`] }}</span>
 </div>

但是会报错blueNum不存在（item值为blue时），使用{{}}果然还是不能写this

后来想到可以用v-text，解决了

<span v-text="myNum(item)" style="color: #fff;position: absolute;bottom: 10px;left: 49%;transform:translateX(-50%);z-index: 3;font-size: 12px;"></span>


 methods: {
   myNum(item){
     let name = `${item}Num`
     return this[name]
   },
  }

另外，这种写法也可以，但是不适用于v-text

<call  :call-num="this[`${type}Num`]"></call>