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样式属性必须得加上引号）。

最后的效果图：

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

vue项目在vscode中编译eslint报错没显示红色波浪线提示
vue项目在vscode中编译eslint报错没显示红色波浪线提示. 如下图所示: 下图是预期效果: 不符合Eslint校验规则的代码位置都能展示出来,这样一目了然.能帮助我们迅速找到报错的位置. 然 ...
移动端Vue项目a标签点击事件无效
移动端Vue项目a标签点击事件无效近期项目出现了部分机型点击无效的现象,后来定位到原来是a标签的问题,将a标签更换为div标签,加宽加高点击范围,就可以解决这个问题. // a标签点击事件不生效 & ...
vue项目引入标签云动画js函数，不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...
vue项目在IE中显示空白，报错：vuex requires a Promise polyfill in this browser
问题描述 vue项目在非IE内核的浏览器中显示正常,在IE内核浏览器中报错,并显示空白.报错如下: SCRIPT5022: [vuex] vuex requires a Promise polyfi ...
vue项目，webpack中配置src路径别名及使用
默认会有'@'别名,指向src目录,还可以添加自定义别名等等. 使用方法使用别名一般就三种情况:在js中用,在css中用,在html文档内用 js中用,最简单: import {getName} f ...
antimalware service executable占用内存_解决 vue 项目运行过程中内存泄漏问题
vue-cli3.0 内存溢出 JavaScript heap out of memory vue-cli3.0构建的项目,开发过程中,可能会遇到内存溢出的情况,改动一点代码,代码编译,进程就会断掉, ...
Vue的label标签中for的作用
先上代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
html中怎么写css代码,html style样式标签元素教程
html标签元素之时时在构造html时,使用到style标签. 认识与用法教程一.基本语法 style英文翻译:格式.气概含意从字面上也不难晓得与CSS款式干系的标签. 完结.标签内放CSS代码 ...
Vue.js：使用v-bind为多个元素绑定style样式案例
使用v-bind为多个元素绑定单个style 此案例主要是通过v-bind:style在元素上绑定单个style,实现为元素设置不同的样式的效果.当在浏览器中的页面进行显示的时候,如果不勾选复选框,则 ...

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

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

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

最新文章

热门文章