用vue编写循环显示数组,实现单击某一项内容,该项字体加粗效果。-->
时间: 2024-10-09 21:04:52 浏览: 40
在Vue中,你可以通过模板绑定和事件处理机制来实现在数组循环中单击某一项内容使其字体加粗的效果。首先,你需要创建一个包含数据的Vue组件,并有一个数组(例如`items`)作为数据源。然后,在HTML模板部分,利用v-for指令遍历数组,给每个元素添加一个点击事件监听器。
```html
<template>
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">
<span @click="boldText(index)" :style="{ fontWeight: item.bold ? 'bold' : 'normal' }">{{ item.text }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ text: 'Item 1', bold: false },
{ text: 'Item 2', bold: false },
// 更多项...
]
};
},
methods: {
boldText(index) {
this.items[index].bold = !this.items[index].bold; // 切换bold属性值
}
}
};
</script>
```
在这个例子中,我们使用`:style`特性动态地为每个元素设置`fontWeight`样式,当某一项被点击时,对应的`boldText`方法会被调用,改变该元素的`bold`属性,从而实现字体加粗效果。
阅读全文