1. 概述

老话说的好：脚踏实地，从小事做起。

言归正传，今天我们来聊聊 VUE3 的样式绑定。

2. 样式绑定

2.1 样式例子

　　<style>

        /* 颜色 */

        .color-red {

            color: red;

        }

        /* 字体 */

        .font-size-25 {

            font-size: 25px;

        }

        /* 居中 */

        .center {

            text-align: center;

        }

    </style>

2.2 直接写 class 的值

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        template : '<div class="color-red">hello</div>'

    });

    // vm 就是vue应用的根组件

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

2.3 class 绑定字符串数据

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

                myColor : "color-red"

            }

        },

        template : '<div :class="myColor">hello</div>' 

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

2.4 class 绑定对象数据

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

                myColorObject : {

                    "color-red" : true,

                    "font-size-25" : true

                }

            }

        },

        template : '<div :class="myColorObject">hello</div>' 

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

myColorObject 对象中，值为 true 代表使用此样式，为 false 代表不使用

2.5 class 绑定数组数据 

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

                myColorArr : ["color-red", "font-size-25" , {center : true}],

            }

        },

        template : '<div :class="myColorArr">hello</div>'

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

myColorArr 数组中包含的样式都会被使用

2.6 直接写 style 的值

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        template : `

            <div style="color:yellow;">

                hello

            </div>

        `

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

2.7 style 绑定字符串数据

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

                myStyle : "color:yellow;"

            }

        },

        template : `

            <div :style="myStyle">

                hello

            </div>

        `

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

2.8 style 绑定对象数据

<body>

    <div id="myDiv"></div>

</body>

<script>

    const app = Vue.createApp({     // 创建一个vue应用实例

        data() {

            return {

                myStyleObject : {

                    "color" : "blue",

                    "font-size": "25px"

                }

            }

        },

        template : `

            <div :style="myStyleObject">

                hello

            </div>

        `

    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素

3. 综述

今天聊了一下 VUE3  的 样式绑定，希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，每天更新Java干货。

4. 个人公众号

追风人聊Java，欢迎大家关注

VUE3 之 样式绑定的更多相关文章

  1. wpf样式绑定 行为绑定 事件关联 路由事件实例

    代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用 ...

  2. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  3. Vue（九）：样式绑定v-bind示例

    Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 st ...

  4. vue的样式绑定

    vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...

  5. angularJS 状态样式绑定

    angularJS提供输入框不同状态下的样式绑定 输入框有4种状态 ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error): <!DOCT ...

  6. Vue.js：样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  7. Vue.js学习笔记 第二篇 样式绑定

    Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. Vue 将样式绑定到一个对象让模板更清晰

    Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...

  9. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

随机推荐

  1. 痞子衡嵌入式：深扒IAR启动函数流程之段初始化实现中可用的压缩选项

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是IAR启动函数流程里段初始化实现中可用的压缩选项. 接着 <IAR启动函数流程之段初始化函数__iar_data_init3实现& ...

  2. C++ 编译错误记录

    C++ _ZSt28__throw_bad_array_new_lengthv1 编译错误 出现场景:类似代码 vector<vector<int>> grid = {{1, ...

  3. Redis 很屌，不懂使用规范就糟蹋了

    这可能是最中肯的 Redis 使用规范了 码哥,昨天我被公司 Leader 批评了. 我在单身红娘婚恋类型互联网公司工作,在双十一推出下单就送女朋友的活动. 谁曾想,凌晨 12 点之后,用户量暴增,出 ...

  4. CF1610F F. Mashtali: a Space Oddysey

    我们首先发现有如下性质: 我们不妨先随机定向边,那么我们发现无论我们如何翻转边. 都会对其两端的点,造成 \(2 / 4\) 的影响,所以我们发现如果一个点其和他相连的所有边权和为偶数,则我们不能调整 ...

  5. [Noip 2012]同余方程（线性同余方程）

    我们先放题面-- RT就是求一个线性同余方程ax≡1(mod b)的最小正整数解 我们可以将这个同于方程转换成这个方程比较好理解 ax=1+bn(n为整数 我们再进行一个移项变为ax-bn=1 我们设 ...

  6. Codeforces 1010F - Tree（分治 NTT+树剖）

    Codeforces 题面传送门 & 洛谷题面传送门 神仙题. 首先我们考虑按照这题的套路,记 \(t_i\) 表示 \(i\) 上的果子数量减去其儿子果子数量之和,那么对于一个合法的放置果子 ...

  7. 洛谷 P5046 [Ynoi2019 模拟赛] Yuno loves sqrt technology I（分块+卡常）

    洛谷题面传送门 zszz,lxl 出的 DS 都是卡常题( 首先由于此题强制在线,因此考虑分块,我们那么待查询区间 \([l,r]\) 可以很自然地被分为三个部分: 左散块 中间的整块 右散块 那么这 ...

  8. 洛谷 P5644 - [PKUWC2018]猎人杀（分治+NTT）

    题面传送门 很久之前(2020 年)就听说过这题了,这么经典的题怎么能只听说而亲自做一遍呢 首先注意到每次开枪打死一个猎人之后,打死其他猎人概率的分母就会发生变化,这将使我们维护起来非常棘手,因此我们 ...

  9. 使用FastqCount统计fastq文件基本信息？

    目录 1. FastqCount简介 2. 使用 3. 结果 1. FastqCount简介 快速实用小工具:FastqCount https://github.com/zhimenggan/Fast ...

  10. linux下面升级 Python版本并修改yum属性信息

    最近需要在linux下使用python,故需要升级一下python版本,上网查询了一下相关资料,更新了一下linux下面的python环境,记录如下: linux下面升级 Python版本并修改yum ...