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. 实验四 Web服务器1-socket编程

    一.任务详情基于华为鲲鹏云服务器CentOS中(或Ubuntu),使用Linux Socket实现: 1. time服务器的客户端服务器,提交程序运行截图 2. echo服务器的客户端服务器,提交程序 ...

  2. Codeforces 348C - Subset Sums（根号分治）

    题面传送门 对于这类不好直接维护的数据结构,第一眼应该想到-- 根号分治! 我们考虑记[大集合]为大小 \(\geq\sqrt{n}\) 的集合,[小集合]为大小 \(<\sqrt{n}\) 的 ...

  3. BZOJ3971 [WF2013]Матрёшка

    *XXXIV. BZOJ3971 [WF2013]Матрёшка 摘自 DP 做题记录 II 例题 XXXIV. 仍然是神仙区间 DP. 直接设状态 \(f_{i,j}\) 表示区间 \([i,j] ...

  4. Python通过subprocess.Popen.poll控制流程

    python写流程控制的时候,有时需要等待运行结果完成才能进行下一步.有几个想法: 一是反复循环判断直到生成结果文件(且文件中有预期结果),低效易出错: 二是用subprocess模块来判断进程结果, ...

  5. Python基础之变量与常量

    目录 1. 变量 1.1 变量的定义和组成 1.2 变量名的命名规则 1.3 变量名的两种风格 2. 常量 3. 变量内存管理 3.1 变量的存储 3.2 垃圾回收机制 3.2.1 引用计数 3.3 ...

  6. Spring Cloud 2021.0.0 正式发布，第一个支持Spring Boot 2.6的版本！

    美国时间12月2日,Spring Cloud 正式发布了第一个支持 Spring Boot 2.6 的版本,版本号为:2021.0.0,codename 为 Jubilee. 在了解具体更新内容之前, ...

  7. 非标准的xml解析器的C++实现：一、思考基本数据结构的设计

    前言: 我在C++项目中使用xml作为本地简易数据管理,到目前为止有5年时间了,从最初的全文搜索标签首尾,直到目前项目中实际运用的类库细致到已经基本符合w3c标准,我一共写过3次解析器,我自己并没有多 ...

  8. Android系统编程入门系列之硬件交互——多媒体麦克风

    在多媒体摄像头及相关硬件文章中,对摄像头的使用方式需要区分应用程序的目标版本以使用不同的代码流程,而与之相比,麦克风硬件的使用就简单多了. 麦克风及相关硬件 麦克风硬件在移动设备上作为音频的采集设备, ...

  9. Spark(三)【RDD中的自定义排序】

    在RDD中默认的算子sortBy,sortByKey只能真的值类型数据升序或者降序 现需要对自定义对象进行自定义排序. 一组Person对象 /** * Person 样例类 * @param nam ...

  10. sql技巧(增册改查)

    1 select * from wyl.t; 2 --将数据从t1导入t2 3 insert into t2(c1,c2) select c1,c2 from t1 where c1= xx and ...