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. 洛谷 P4463 - [集训队互测 2012] calc（多项式）

    题面传送门 & 加强版题面传送门 竟然能独立做出 jxd 互测的题(及其加强版),震撼震撼(((故写题解以祭之 首先由于 \(a_1,a_2,\cdots,a_n\) 互不相同,故可以考虑求出 ...

  2. Kubernetes（K8s）部署 SpringCloud 服务实战

    1. 概述 老话说的好:有可能性就不要放弃,要敢于尝试. 言归正传,之前我们聊了一下如何在 Kubernetes(K8s)中部署容器,今天我们来聊一下如何将 SpringCloud 的服务部署到 Ku ...

  3. No.2 R语言在生物信息中的应用—模式匹配

    目的: 1. 计算自定义模序在所有蛋白质的匹配位点和次数 2. 输出超过阈值的蛋白质序列到Hit_sequences.fasta 3. Hit_sequences.fasta中序列用小写字母,匹配用大 ...

  4. 巩固javaweb第十五天

    巩固内容: 单选按钮: 在注册功能中,用户选择学历使用的是单选按钮,并且是多个单选按钮,每个选项对 应一个单选按钮,用户只能选择其中一个,这多个单选按钮的格式相同.如果用户要输入 的信息只有少数几种可 ...

  5. A Child's History of England.3

    So, Julius Caesar came sailing over to this Island of ours, with eighty vessels and twelve thousand ...

  6. day13 装饰器与语法糖

    day13 装饰器与语法糖 一.装饰器 1.什么是装饰器 装饰器就是装饰别人的工具,具体是指为被装饰者添加新功能 装饰器->函数 被装饰者->函数 2.为何要用装饰器 装饰器的核心思想:( ...

  7. linux 内存变量的分布

    我们知道,linux通过虚拟内存管理进程的内存(进程的地址空间),而进程的地址空间分布如下 : 从进程的空间中可以看出,内存中的变量有的来自可执行elf文件,在elf文件中已经分配好存储空间,有的是在 ...

  8. 分类模型性能的评判方法-ROC分析

    一.混淆矩阵 二.引入ROC曲线 如上第一幅图,蓝色高斯表示真实值为阴性,红色高斯表示真实值为阳性.A,B,C代表不同的阈值,阈值线左边表示预测值为阴性,阈值线右边表示预测值为阳性.阈值从A到C,由此 ...

  9. C语言内自定义汇编函数&调用约定

    探究如何在C语言里直接自写汇编函数 裸函数 裸函数与普通函数的区别 普通函数在经过编译器编译时,编译器自动生成保护现场,恢复现场等反汇编代码 当我们想要自己实现函数内部的汇编代码时,就可以告诉汇编器不 ...

  10. Ubantu nodejs卸载与二进制安装

    #apt-get 卸载 sudo apt-get remove --purge npm sudo apt-get remove --purge nodejs sudo apt-get remove - ...