uniapp怎么遍历节点点击更改样式
时间: 2023-06-14 15:03:41 浏览: 142
遍历节点树-javascript学习文档
可以使用uniapp中提供的v-for指令来遍历节点,然后使用v-bind指令将需要更改的样式绑定到对应的数据上,最后在点击事件中修改绑定的数据。
示例代码:
```html
<template>
<view>
<view v-for="(item, index) in list" :key="index" :style="{color: item.color}" @click="changeColor(index)">
{{ item.text }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ text: 'item1', color: 'black' },
{ text: 'item2', color: 'black' },
{ text: 'item3', color: 'black' }
]
}
},
methods: {
changeColor(index) {
this.list[index].color = 'red'
}
}
}
</script>
```
上面的代码中,使用v-for指令遍历list数组中的数据,将每个数据项的color属性绑定到对应的节点样式上。在点击事件中调用changeColor方法,修改对应数据项的color属性,从而改变节点的样式。
阅读全文