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. Midjourney的一些学习心得：如何高效的图生图

    注意本文没有什么长篇大论,全部是自己的学习心得. 心得体会:如何图生图 今天在一篇midjourney看到好图应该怎么抄. 相信经常会看到好图也想要的,但是要么抄不出感觉,要么抄过来把水印也抄了,这一 ...

  2. 商品详情接口设计：使用API调用获取淘宝商品数据的完整方案

    ​ 在如今的电商时代,获取商品的详细信息是实现商业化应用的基础.本文将详细介绍如何通过API调用来获取淘宝商品数据,并提供一个完整的商品详情接口设计方案,包括代码示例.开发人员可以根据此方案快速实现商 ...

  3. LeetCode279:完全平方数，动态规划解法超过46%，作弊解法却超过97%

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本篇概览 这是道高频面试题,值得一看 首先, ...

  4. 钉钉旧版服务端SDK支持异步方法的升级改造

    最近项目中需要对接钉钉,有些钉钉 API 的访问需要使用旧版服务端 SDK 才能搞定,但是这个 SDK 使用的还是 .NET Framework 2.0 框架,不能跨平台部署,也不支持 async\a ...

  5. Vue源码学习(七):合并生命周期(混入Vue.Mixin)

    好家伙,   1.使用场景 现在来,来想一下,作为一个使用Vue的开发者,假设现在我们要使用created(),我们会如何使用 1.1.  .vue文件中使用 <template> < ...

  6. 小札 Combinatorics & Inclusion-Exclusion Principle 1

    「codeforces - 340E」Iahub and Permutations link. 把 \(1,\dots,n\) 中剩下没被固定的数的数量记作 \(s\),再把这其中不担心有会填到自己身 ...

  7. JS深入学习笔记 - 第三章.变量作用域与内存

    1.原始值和引用值 ECMScript变量包含两种不同类型是数据:原始值和引用值. 原始值:最简单的数据.有6中原始值:Undefined.Null.Boolean.Number.String和Sym ...

  8. Java四种引用 强引用,软引用,弱引用,虚引用(转)

    强引用 : 只要引用存在,垃圾回收器永远不会回收 Object obj= new Object(); Object 对象对后面 new Object的一个强引用, 只有当obj这个被释放之后,对象才会 ...

  9. 文心一言 VS 讯飞星火 VS chatgpt （105）-- 算法导论10.1 3题

    三.用go语言,仿照图 10-2,画图表示依次执行操作 ENQUEUE(Q,4).ENQUEUE(Q,1).ENQUEUE(Q,3).DEQUEUE(Q).ENQUEUE(Q,8)和 DEQUEUE( ...

  10. PHPStudy hosts文件可能不存在或被阻止打开及同步hosts失败问题

    在使用PHPStudy建站包时,有时会遇到同步hosts失败的问题,可能是因为hosts文件不存在或被阻止打开.这个问题通常可以通过以下几个步骤解决: 步骤一:检查hosts文件是否存在 首先,我们需 ...