vue.js 循环设置ref并在js中循环调用

Html源码：

<tr v-for="(item,index) in userList" :key="index">

<td>{{item.id}}</td>

<td>{{item.name}}</td>

<td :ref="'item'+index">{{item.age}}</td>   //循环设置ref

</tr>

Script源码：

methods: {

change: function() {

var key = 0;

for (key in this.userList) {

if (this.userList[key].age== "绿色") {              //根据不同条件针对不同ref，修改样式

this.$refs["item" + key][0].style.color = "green";   //含参数调用

} else if (this.userList[key].age== "红色") {

this.$refs["item" + key][0].style.color = "red";

}

}

}

},

mounted() {

this.change();

}