vue2写法
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Document</title>

        <script src="../js/vue.js"></script>

        <style>

            .aa {

                background: green;

            }

            .bb {

                background: yellow;

            }

            .cc {

                background: pink;

            }

            .dd {

                background: blue;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <div :class="classobj">class绑定对象</div>

            <div :class="classarr">class绑定数组</div>

            <div :style="styleobj">style绑定对象</div>

            <div :style="stylearr">style绑定数组</div>

        </div>

        <script>

            var vm = new Vue({

                data: {

                    classobj: {

                        aa: true,

                        bb: true,

                        cc: false,

                    },

                    classarr: ['aa', 'bb'],

                    styleobj: {

                        backgroundColor: 'red',

                    },

                    stylearr: [{ backgroundColor: 'green' }],

                },

            }).$mount('#app');

            // Vue.set(对象,属性,属性值) 例如：Vue.set(vm.classobj,dd,true)

            // vm.classarr.push('dd')

            // vm.stylearr.push({fontSize:'20px'})

        </script>

    </body>

</html>
vue3
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Document</title>

        <script src="../js/vue.global.js"></script>

    </head>

    <style>

        .aa {

            background: green;

        }

        .bb {

            background: yellow;

        }

        .cc {

            background: pink;

        }

        .dd {

            background: blue;

        }

    </style>

    <body>

        <div id="app">

            {{name}}

            <div :class="classobj">动态切换class-对象写法</div>

            <button @click="addClass">addClass</button>

        </div>

        <script>

            var obj = {

                data() {

                    return {

                        name: 'ly',

                        classobj: {

                            aa: true,

                            bb: true,

                            cc: false,

                        },

                    };

                },

                methods: {

                    addClass() {

                        this.classobj.dd = true;

                    },

                },

            };

            const app = Vue.createApp(obj).mount('#app');

        </script>

    </body>

</html>

Vue绑定Style和Class写法的更多相关文章

  1. VUE 绑定背景图片的写法

    <div v-bind:style='{"background-image":"url("+imgUrl+")"}' >< ...

  2. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  3. vue绑定属性、绑定class及绑定style

    1.绑定属性  v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...

  4. 【Vue】style和class 列表渲染 使用v-for进行循环 监控失效 双向数据绑定 过滤案例 事件修饰符

    目录 昨日回顾 style和class class属性的三种设置方法 style属性的三种设置方法 条件渲染 列表渲染 使用v-for进行循环 循环数字 循环字符串 循环对象 循环数组 标签key值加 ...

  5. vue 绑定样式的几种方式

    vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...

  6. vue2.* 绑定属性 绑定Class 绑定style 03

    <template> <div id="app"> <!-- 绑定属性 --> <div v-bind:title="title ...

  7. NO.04--我的使用心得之使用vue绑定class名

    今天聊一聊这个话题,其实方式有很多种,我今天介绍几种我使用到的,各位看官耐心看: 一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <te ...

  8. $Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数

    一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候  表名小写_set.all()不知是哪个字段 ...

  9. 练习vue(class,style属性)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 深入理解VUE样式style层次分析

    刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...

随机推荐

  1. 【AI绘画模型汇总】分享5个国内实用的AI绘画模型网站-C站AI模型平替网站

    鉴于大家未必会有魔法工具访问civitai(C站)下载AI模型,这里我搜集整理了5个实用的国内版AI模型素材库,无障碍访问下载Stable diffusion模型. 1.LiblibAI 访问速度快, ...

  2. 全局多项式（趋势面）与IDW逆距离加权插值：MATLAB代码

      本文介绍基于MATLAB实现全局多项式插值法与逆距离加权法的空间插值的方法,并对不同插值方法结果加以对比分析. 目录 1 背景知识 2 实际操作部分 2.1 空间数据读取 2.2 异常数据剔除 2 ...

  3. MediaBox助力企业一站式获取音视频能力

    以一只音视频百宝箱,应对「千行千面」. 洪炳峰.楚佩斯|作者 大家好,今天我分享的主题是MediaBox--行业音视频数字化再加速. 根据权威数据表明,65%的行业数字化信息来自视频,基于此,音视频技 ...

  4. VINS中的重力-尺度-速度初始化（2）

    VINS中的重力-尺度-速度初始化(2) 细化重力 \(\quad\)上一篇文章中得到的 \(g\) 一般是存在误差的.因为在实际应用中,当地的重力向量的模一般是已知固定大小的(所以只有两个自由度未知 ...

  5. 物理服务器不重启分配raid

    一.MegaCli 命令的安装及使用 目录 一.MegaCli 命令的安装及使用 1.下载rpm包 2.安装 3.安装完,就会在/opt/下创建个MegaRAID目录,文件都在里面 4.添加软连接 5 ...

  6. MPI转以太网Plus模块Modbus连接两台变频器通信案例

    MPI转以太网Plus模块Modbus主站连接两台变频器通信案例 MPI转以太网Plus模块连接200PLC无需编程实现Modbus主从站功能与2台变频器modbus通信:以下就是MPI转以太网模块作 ...

  7. oracle:ORA-14765建索引阻塞创建分区及处理步骤

    在生产库建立一个索引,报ORA-14765创建索引时不能创建分区,也就是索引的创建阻塞分区的建立. 处理步骤: 1.与开发人员沟通昨天下午在Tbl_Waste表上建索引,一直未返回成功,定位问题SQL ...

  8. STL容器：map

    map 可以当作特殊的数组来使用,在数组开不下,或者数组下标不是整数的时候使用 map 就很方便,比如统计字符串的出现个数,统计 int 范围内的数的出现次数等等. 映射是指两个集合之间的元素的相互对 ...

  9. C语言存储类别

    对于C语言中的变量,存储类别可分为4种:auto(自动存储).static(静态存储).register(寄存器存储).extern(外部存储). auto自动存储 函数中的局部变量,如果不专门声明为 ...

  10. 为何 DevOps 会给开发人员带来压力和倦怠？

    企业正在享受 DevOps 实施带来的好处,但这也是有代价的.开发人员需要承担额外的责任,可能会导致他们感到疲惫不堪.因此我们可以采取一些方法来确保 DevOps 工程师的满意度. DevOps 的支 ...