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. iNeuOS工业互联网操作系统，分布式云端控制安全策略和增加实时日志功能

    目       录 1.      概述... 2 2.      平台演示... 2 3.      云端控制策略和应用过程... 2 3.1           云端控制策略... 2 3.2   ...

  2. pycharm两个交互模式

  3. nohup使用

    nohup:不挂断运行 在忽略挂起信号的情况下运行给定的命令,以便在注销后命令可以在后台继续运行. 可以这么理解:不挂断的运行,注意并没有后台运行的功能,就是指,用nohup 运行命令可以是命令永远运 ...

  4. 【学相伴】Nginx最新教程通俗易懂-狂神说

    Nginx - 学相伴 分享人:秦疆(遇见狂神说) 公司产品出现瓶颈? 我们公司项目刚刚上线的时候,并发量小,用户使用的少,所以在低并发的情况下,一个jar包启动应用就够了,然后内部tomcat返回内 ...

  5. E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing

    解决办法:apt-get update或者apt-get cleanapt-get update 或者 apt-get update --fix-missing问题解析1 source本身的问题 根据 ...

  6. 【leetcode】15. 3 Sum 双指针 压缩搜索空间

    Given an integer array nums, return all the triplets [nums[i], nums[j], nums[k]] such that i != j, i ...

  7. Sibel Tools和Siebel Cilent的安装步骤

    关于Siebel的资料在网上是少之又少,当时安装开发工具的时候花了挺长时间的,把步骤记录了下来. 一安装win32_11gR2_client 首先要安装Oracle数据库的客户端,必须是32位,安装过 ...

  8. OkHttp3 使用

    导入 compile 'com.squareup.okhttp3:okhttp:3.3.0' GET请求 String url = "https://www.baidu.com/" ...

  9. Spring.DM版HelloWorld

    本文主要描述使用Spring.DM2.0,创建OSGi的HelloWorld演示程序,理解Spring.DM的OSGi框架实现机制.   环境描述: 项目 版本 Eclipse 3.7.x JDK 1 ...

  10. spring基于注解的声明式事务控制

    package com.hope.service.impl;import com.hope.dao.IAccountDao;import com.hope.domain.Account;import ...