首页在 Vue 中绑定 style 属性为数组，根据数组里的颜色值动态改变文本颜色的示例代码

在 Vue 中绑定 style 属性为数组，根据数组里的颜色值动态改变文本颜色的示例代码

时间: 2025-03-28 19:04:39 浏览: 32

### Vue 动态绑定 Style 数组示例代码在 Vue.js 中，可以通过 `:style` 或者 `v-bind:style` 来动态绑定样式。当使用数组语法时，可以传递多个样式对象给同一个元素，从而实现样式的叠加效果。以下是基于引用中的描述[^1]和扩展的知识构建的一个示例代码： #### HTML 部分 ```html <template> <div class="basic" :style="styleArr">{{ name }}</div> </template> ``` #### JavaScript 部分 ```javascript <script> export default { data() { return { name: "动态文本颜色", styleArr: [ { fontSize: '40px', color: 'red' }, // 设置字体大小和初始颜色 { backgroundColor: 'lightgray' } // 背景颜色设置 ] }; }, methods: { changeColor() { this.styleArr[0].color = this.styleArr[0].color === 'red' ? 'blue' : 'red'; } } }; </script> ``` #### CSS 部分（可选）如果需要额外的样式调整，可以在 `<style>` 标签中定义类或其他全局样式。 --- 上述代码展示了如何通过数组形式动态修改文本的颜色。具体来说，`styleArr` 是一个包含两个对象的数组，其中第一个对象控制字体大小和颜色，第二个对象负责背景颜色。调用方法 `changeColor()` 可以切换文本颜色，在红色和蓝色之间交替变化[^2]。 --- ###

阅读全文