Vue项目在标签中如何书写多个内敛style样式

最新推荐文章于 2024-06-19 13:24:57 发布

没有昵称...

最新推荐文章于 2024-06-19 13:24:57 发布

阅读量2.2k

点赞数

文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/zebghfv/article/details/121656793

版权

本文介绍了在Vue项目中如何利用v-bind:style指令为数组循环中的元素动态设置样式。通过示例代码展示了如何为偶数项元素添加红色背景，奇数项元素添加蓝色背景。关键在于使用三目运算符结合条件判断来决定应用哪个样式对象。

摘要由CSDN通过智能技术生成

Vue项目在标签中如何书写多个内敛style样式

例如：对一个数组进行循环，我想给偶数项的添加红色背景，奇数项的添加蓝色背景，这时候就可以用v-bind:style="[]",详细语法书写方式如下：
组件代码：

<template>
    <div id='test'>
       <div v-for="item in 10" :key="item" :style="[{'width': '50px', 'height': '20px', 'background-color': 'blue'}, item%2 === 0 ? styleObj : '']">{{item}}</div>
    </div>
</template>

<script>
export default {
    name: 'Test',
    data(){
        return {
            styleObj: {'background-color': 'red', color: 'white'}
        }
    }
}
</script>

<style scoped>

</style>

:style="[{‘width’: ‘50px’, ‘height’: ‘20px’, ‘background-color’: ‘blue’}, item%2 === 0 ? styleObj : ‘’]"
数组中的第一个元素则为默认的，都会添加的样式，然后第二个元素就是通过三目运算符进行控制只有在偶数项的时候添加样式。（对于有‘-’符合的CSS样式属性必须得加上引号）。

最后的效果图：
在这里插入图片描述