<script>
export default{
data(){
return {
color:"pink",
fontSize:'20px',
bgcColor:"blue",
styleObj:{
color:"green",
fontSize:"20px",
'background-color':'pink'
}
}
}
}
</script>
<template>
<div>
<!-- 第一种:放置字符串 -->
<p style="color:red">style字符串绑定</p>
<!-- 第二种:对象 -->
<p style="key(css属性名):value(属性值,来自data)"></p>
<!-- 推荐使用 camelCase,但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称) -->
<p :style="{color:color,fontSize:fontSize,'background-color':bgcColor}">style 对象绑定</p>
<p :style="styleObj">style 直接绑定一个样式对象通</p>
<!-- 数组样式 -->
<p :style="[styleObj,{border:'5px solid'}]">数组样式</p>
</div>
</template>
vue中style的绑定
于 2023-05-26 14:51:20 首次发布
本文展示了在Vue.js中如何绑定样式,包括字符串绑定、对象绑定、直接绑定数据对象以及使用数组组合样式。通过data属性定义颜色和尺寸,然后在模板中动态应用到p标签的style属性上,演示了灵活的CSS样式管理方法。
摘要由CSDN通过智能技术生成