【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

posted @   PyAj  阅读(426)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示