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. 9.2 k8s结合Jenkins与gitlab实现代码升级与回滚

    1.部署Jenkins 1.1 安装jdk # apt 安装jdk11 apt install openjdk-11-jdk # 查看 root@jenkins:~# java -version op ...

  2. [源码解析] PyTorch 分布式 Autograd (2) ---- RPC基础

    [源码解析] PyTorch 分布式 Autograd (2) ---- RPC基础 目录 [源码解析] PyTorch 分布式 Autograd (2) ---- RPC基础 0x00 摘要 0x0 ...

  3. 洛谷 P5280 - [ZJOI2019]线段树（线段树+dp，神仙题）

    题面传送门 神仙 ZJOI,不会做啊不会做/kk Sooke:"这八成是考场上最可做的题",由此可见 ZJOI 之毒瘤. 首先有一个非常显然的转化,就是题目中的"将线段树 ...

  4. seq生成格式化字符

    [root@ansz.quan.bbs ~]$seq -s "+" 10 1+2+3+4+5+6+7+8+9+10 seq为生成数字序列 -s 分隔符

  5. python-django-常用models里面的Field

    1.models.AutoField 自增列 = int(11) 如果没有的话,默认会生成一个名称为 id 的列 如果要显式的自定义一个自增列,必须设置primary_key=True. 2.mode ...

  6. 压力测试工具——apchebench(简称ab)

    ab的原理 ab的原理:ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基于URL的,因此,它既可以用来测试apache的负载压力,也可以测试nginx.li ...

  7. WebRTC本地分享屏幕，录制屏幕

    WebRTC有分享屏幕的功能.使用的是getDisplayMedia方法.用户同意分享屏幕后,可以拿到视频流. 再结合MediaRecorder和Blob,把视频流数据存下来,就能得到录制屏幕的视频. ...

  8. opencv学习(三)——绘图功能

    绘图功能 我们将学习以下函数:cv.line(),cv.circle(),cv.rectangle(),cv.ellipse(),cv.putText()等. 在这些功能中,有一些相同的参数: img ...

  9. A Child's History of England.11

    CHAPTER 4 ENGLAND UNDER ATHELSTAN AND THE SIX BOY-KINGS Athelstan, the son of Edward the Elder, succ ...

  10. 零基础学习java------23---------动态代理，ip，url案例

    1. 动态代理 2. ip,url案例 给定的access.log是电信运营商的用户上网数据,第一个字段是时间, 第二个字段是ip地址,第三个字段是访问的网站,其他字段可以忽略不计. 第一个字段是网段 ...