动态样式设置

举报
SHQ5785 发表于 2024/04/09 11:35:40 2024/04/09
【摘要】 一、需求在Vue项目开发过程中,需要根据按钮数量动态设置icon元素宽度。 二、分析在el-col标签内,若只展示1个icon元素的话,则设置宽度为100%;若显示2个icon元素的话,则设置宽度为50%;以此类推… 三、解决方法<el-col v-for="(btn, index) in btnArr" :key="index" :style="{width: multiWidth}">...

一、需求

Vue项目开发过程中,需要根据按钮数量动态设置icon元素宽度。

二、分析

el-col标签内,若只展示1个icon元素的话,则设置宽度为100%;
若显示2个icon元素的话,则设置宽度为50%;
以此类推…

三、解决方法

<el-col v-for="(btn, index) in btnArr" :key="index" :style="{width: multiWidth}">...</el-col>

<script>
...
computed: {
	multiWidth () {
		switch (option.length) {
			case 1:
				return 100 + '%'
			case 2:
				return 50 + '%'
			case 3:
				return 33 + '%'
			case 4:
				return 25 + '%'
		}
	}
}
</script>

有关computed,详参博文:

Vue进阶(八十四):vue中Computed 和 Watch的使用和区别
Vue进阶(二十八):浅析Vue中computed与method的区别》。

也可以考虑使用class属性实现样式动态设置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
	width: 100px;
	height: 100px;
	background: red;
}
.active {
	width: 100px;
	height: 100px;
	color: green;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[isTest ? errorClass : '',isActive ? activeClass : '']">ceshi</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	isTest:true,  
	activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

四、动态样式设置

注意事项:

  • 凡是有-style属性名都要变成驼峰式,比如font-size要变成fontSize;
  • 除了绑定值,其他的属性值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff;

4.1 对象

html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

html :style="{color:(index==0?conFontColor:'#000')}"

4.2 数组

html :style="[baseStyles, overridingStyles]"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

4.3 三目运算符

html :style="{color:(index==0?conFontColor:'#000')}"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

4.4 多重值

此时,浏览器会根据运行支持情况进行选择

html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

4.5 绑定data对象

html :style="styleObject"
data() {
    return{
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }  
    }
}

五、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。