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>