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. 文心一言 VS 讯飞星火 VS chatgpt （81）-- 算法导论7.4 6题

    六.如果用go语言,考虑对 PARTITION 过程做这样的修改:从数组 A 中随机选出三个元素,并用这三个元素的中位数(即这三个元素按大小排在中间的值)对数组进行划分.求以a 的函数形式表示的.最坏 ...

  2. 选择合适的方法进行API接口调试

    随着互联网的快速发展,API(Application Programming Interface)接口在软件开发中扮演着重要的角色.调试API接口是确保系统正常运行的关键步骤之一.本文将介绍如何选择适 ...

  3. shopee商品详情接口的应用

    Shopee是东南亚和台湾地区最大的电子商务平台之一,成立于2015年,目前覆盖6个国家和地区.作为一家新兴电商平台,Shopee拥有快速增长的销售额和庞大的用户群体,为开发者提供了丰富的商业机会.其 ...

  4. MySQL中不同场景中排它锁的不同表现

    mysql5.7 Golang的gorm做的测试 最后结论如下: 按主键查询,只会锁查到的那条数据 按主键加其他字段查询同上, 按照非主键字段查询,查到查不到都会造成表锁 (以上的锁指排他锁) 排它锁 ...

  5. DAY005_异或运算

    运算规则 二进制:相同为0 相异为1 十进制:相同为0 任何数字和0异或都是它本身 不利用额外变量交换两个数 数组中一种数字出现了奇数次,其他数都出现了偶数次,怎么得到这个出现了奇数次的数 将所有的数 ...

  6. Mysql基础篇-查询、函数、多表、事务

    1. 基础篇 1.1 mysql用户和权限管理 查询用户 USER mysql; SELECT * FROM user; 创建用户 CREATE USER '用户名'@'主机名' IDENTIFIED ...

  7. 【接口自动化测试】Eolink Apilkit 安装部署，支持 Windows、Mac、Linux 等系统

    Eolink Apikit 有三种客户端,可以依据自己的情况选择.三种客户端的数据是共用的,因此可以随时切换不同的客户端. 我们推荐使用新推出的 Apikit PC 客户端,PC 端拥有线上产品所有的 ...

  8. RCU的简单认识

    RCU RUC是什么? RCU(Read-Copy-Update)是一种用于并发编程的技术,旨在提供高效且无锁(lock-free)的读操作,同时保证数据一致性和并发性. 也就是说他并不需要锁的机制来 ...

  9. Docker常见使用

    DockerFile: FROM openjdk:8 MAINTAINER guotong ADD lpl-1.0-SNAPSHOT.jar lpl-1.0-SNAPSHOT.jar EXPOSE 8 ...

  10. 使用Blazor WASM实现可取消的多文件带校验并发分片上传

    前言 上传大文件时,原始HTTP文件上传功能可能会影响使用体验,此时使用分片上传功能可以有效避免原始上传的弊端.由于分片上传不是HTTP标准的一部分,所以只能自行开发相互配合的服务端和客户端.文件分片 ...