首页vue写一段代码显示五个div 背景色一样都是显示蓝色当点击其中一个，被点击的显示红色其余颜色蓝色

vue写一段代码显示五个div 背景色一样都是显示蓝色当点击其中一个，被点击的显示红色其余颜色蓝色

时间: 2024-09-12 12:16:16 浏览: 27

以下是一个使用Vue.js编写的示例代码，展示了如何创建五个`div`元素，并实现点击某个`div`时，被点击的`div`背景色变为红色，其余`div`保持蓝色背景色。 ```html <!DOCTYPE html> <html> <head> <title>Vue 示例：改变 div 背景色</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <div v-for="(div, index) in divs" :key="index" :style="{ backgroundColor: activeDiv === index ? 'red' : 'blue' }" @click="setActiveDiv(index)" > Div {{ index + 1 }} </div> </div> <script> new Vue({ el: '#app', data: { divs: Array(5).fill(''), activeDiv: null }, methods: { setActiveDiv(index) { this.activeDiv = index; } } }); </script> </body> </html> ``` 在这个示例中，我们使用了Vue的`v-for`指令来循环创建五个`div`元素，并使用`:key`指令为每个`div`提供一个唯一的键值。每个`div`的背景色通过`:style`绑定来动态设置，如果当前`div`的索引与`activeDiv`数据属性相同，则背景色为红色，否则为蓝色。点击`div`时，会调用`setActiveDiv`方法，该方法会更新`activeDiv`数据属性，从而触发视图更新并改变相应`div`的背景色。

阅读全文