【vue3入门】-【14】style绑定
style绑定
数据绑定的一个常见需求场景式操作元素的css style列表,因为style是一个Attribute,我们可以和其他Attribute一样使用v-bind,将它们和动态的字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且容易出错的。因此,vue专门为style的v-bind用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。
- 绑定对象(常用)
<template>
<p :style="{ color: 'red' }">style绑定1</p>
<p :style="{ color: activeColor, fontSize: fontSize + 'px' }">style绑定2</p>
<p :style="styleSize">style绑定3</p> <!--绑定对象:常用方式-->
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: '30',
styleSize: {
color:'red',
fontSize:'30px'
}
}
}
}
</script>
- 绑定数组(不常用)
我们还可以给style绑定一个包含多个样式对象的数组
<p :style="[styleSize]">style绑定4</p> <!--绑定数组:不常用,也不推荐-->
以上内容出自
【【2023最新版】Vue3从入门到精通,零基础小白也能听得懂,写得出,web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9
分类:
前端 / vue-入门
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性