<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .bgBlue{

                background: skyblue;

            }

            .bgPink{

                background: pink;

            }

            .div1{

                width: 300px;

                height: 300px;

                margin: 0 auto;

            }

            #div1{

                width: 300px;

                height: 300px;

                margin: 0 auto;

            }

        </style>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <div  :class="color">

            </div>

            <button @click='changeColor'>更改颜色</button>

            <hr />

            <div  :class="color2">

            </div>

            <button @click='changeColor2'>更改颜色</button>

            <hr />

            <div  :class="color3">

            </div>

            <button @click='changeColor3'>更改颜色</button>

            <hr />

            <div  :class="['div1',divBG]">

            </div>

            <button @click='changeColor4'>更改颜色</button>

            <hr />

            <!--

                vue给class属性专门定制了绑定的方式，那么不会删除默认class里面的值，而是进行添加的方式，将绑定变量里面的值放入class

            -->

            <div data-key='123' :data-key='msg'  class="123"  :class="['div1',{bgPink:!isBlue},{bgBlue:isBlue}]">

            </div>

            <button @click='changeColor5'>更改颜色</button>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    color:'div1 bgBlue',

                    color2:{

                        div1:true,

                        bgBlue:true,

                        bgPink:false

                    },

                    color3:[ 'div1','bgBlue' ],

                    divBG:'bgBlue',

                    isBlue:true,

                    msg:'hello'

                },

                methods:{

                    changeColor:function(){

                        this.color = 'div1 bgPink'

                    },

                    changeColor2:function(){

                        this.color2 = {

                            div1:true,

                            bgBlue:false,

                            bgPink:true

                        }

                    },

                    changeColor3:function(){

                        this.color3 = ['div1','bgPink']

                        //新建了1个数组，将老的内存地址覆盖掉

                        //this.color3[1] = 'bgPink',因为这样并没有更改掉color3内存地址没有更改掉，所以不会触发视图的更新

                        //this.$set(this.color3,1,'bgPink')

                    },

                    changeColor4:function(){

                        this.divBG = 'bgPink'

                    },

                    changeColor5:function(){

                        this.isBlue = false

                    }

                }

            })

        </script>

        <!--

            1、class属性绑定变量，变量是相对应的classname的字符串

            2、使用对象的方式来绑定class,根据对象里的属性值是否是true，来决定这个属性是否添加进class

            3、数组的形式

        -->

    </body>

</html>

vueclass的更多相关文章

  1. vue---class和style的基本用法

    不多BB了 直接上代码了 通俗移动易懂总结了5种常用改变样式 的形式 <style> .actived2{ color:red; } </style> </head> ...

  2. Nuxt / Vue.js in TypeScript: Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'

    项目背景, Nuxt(vue), TypeScript 生成完项目框架, 添加测试demo页面. 在生成的模板代码中添加layout配置如下: <script lang="ts&quo ...

  3. vue-class和style样式绑定

    前言 操作元素的 class 样式列表和 style 内联样式为数据绑定是前端开发中一个常见的需求,这些样式都属于元素的属性 attribute ,因此我们可以通过 v-bind 来动态绑定元素的样式 ...

  4. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战：异步实现数据双端渲染

    回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...

  5. 从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇：基于Vuex的权限验证探究

    缘起 哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登录进行研究,这一块咱们之前在说第一个项目的时候 ...

  6. Vue+typescript报错项

    39:1 Unable to resolve signature of class decorator when called as an expression. Type '<VC exten ...

  7. 使用 typescript 开发 Vue

    基础配置: 1. 准备一个使用 vue-cli 生成的项目 2. 使用 npm 一建安装基础配置 npm i -S @types/node typescript vue-class-component ...

  8. Vue-Property-Decorator源码分析

    概述 vue-property-decorator是基于vue组织里vue-class-component所做的拓展,先来了解一下vue-class-component Vue-Class-Compo ...

  9. vue学习笔记3： 动态绑定

    一.知识点 动态绑定: vue-class: 三目写法 对象写法 数组写法 vue-style: 三目写法 对象写法 数组写法 二.代码示例 1. vue-class vue-class三目写法 &l ...

随机推荐

  1. 【Django】一对多表结构

    1.创建project数据库表 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.co ...

  2. MySql自定义函数-关于保留小数位的特殊需求

    背景 昨天,关于价格详情接口又来了一个小需求,而且有点特别.价格显示:改为保留两位小数,没错,就是保留两位小数.大家是不是想说这没啥特别的...数据库都有函数搞定了.例如四舍五入的ROUND(x,d) ...

  3. Spring Boot 2.x 基础案例：整合Dubbo 2.7.3+Nacos1.1.3（配置中心）

    本文原创首发于公众号:Java技术干货 1.概述 本文将Nacos作为配置中心,实现配置外部化,动态更新.这样做的优点:不需要重启应用,便可以动态更新应用里的配置信息.在如今流行的微服务应用下,将应用 ...

  4. 前端深入之css篇丨2020年前，彻底掌握css动画【transition】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  5. 02-14 scikit-learn库之逻辑回归

    目录 scikit-learn库之逻辑回归 一.LogisticRegression 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.LogisticRegressi ...

  6. Linux学习资料网站汇总链接（持续更新ing）

    排名不分先后. 学海无涯苦作舟. 博客: 1.slmba:LINUX博客原创大牛 2.edsionte's TechBlog:Linuxer (他的友情链接中还有一堆Linuxer,被公司屏蔽进不去. ...

  7. Spring基础（一）

    一.Spring简介 Spring框架性质是属于容器性质的.容器中装什么对象就有什么功能.所以可以一站式开发(springmvc+ioc+spring jdbc).核心是IOC(控制反转)和AOP(面 ...

  8. HTML5远程工具

    因为有从网页直接远程其他windows电脑的需求,于是通过网上搜索找到下面几个解决方案,分享一下: 1.windows的远程桌面web连接tsweb 下载地址https://www.microsoft ...

  9. java集合之Stack栈基础

    Stack堆栈: 是后进先出(LIFO)的对象堆栈,继承Vector—AbstractList--AbstractCollection类,底层是通过数组实现, boolean empty() 判断堆栈 ...

  10. opencv::轮廓周围绘制矩形框和圆形框

    基于RDP算法实现,目的是减少多边形轮廓点数 approxPolyDP(InputArray curve, OutputArray approxCurve, double epsilon, bool ...