<!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. redis-分布式锁-消除竞争条件

    因为信号量的设计过程中,获取一个信号量需要执行多个命令组成的流水,这样容易形成竞争条件. 为了消除信号量实现中所有可能出现的竞争条件,构建一个正确的计数信号量,需要在 信号量时,添加带有短暂超时时间的 ...

  2. layer.open打开一个新的jsp页面，如何关闭并刷新父页面问题

    layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新父页面列表. layer.closeAll(); parent.layer.closeAll(); wi ...

  3. 如何增强VR的vection/self-motion？

    上一节讲到了vection是给玩家带来“移动感”的因素,它提供良好VR体验的关键之一.那么VR中我们一般用哪些方式来提供vection呢?1 首先来简单了解一下人体和空间相关的感知机制. 视觉线索 v ...

  4. php 正则判断是否是手机号码 最新

    php 正则判断是否是手机号码 最新 标签: php正则 2013-09-22 14:31 55076人阅读 评论(1) 收藏 举报  分类: php(42)  版权声明:本文为博主原创文章,若转载请 ...

  5. 第三方日志库logrus使用

    日志是程序中必不可少的一个环节,由于Go语言内置的日志库功能比较简洁,我们在实际开发中通常会选择使用第三方的日志库来进行开发.本文介绍了logrus这个日志库的基本使用. logrus介绍 Logru ...

  6. Forest plot（森林图） | Cox生存分析可视化

    本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/2W1W-8JKTM4S4nml3VF51w 更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号 ...

  7. GUI tkinter (bind)事件篇

    """事件:1.我们的很多操作,比如我们点击了一下鼠标,这就是一 个事件,而操作系统会根据我们的相应的事件产生相应的消息, 操作系统把消息传递给我们的应用程序,然后我们的 ...

  8. Real Beauty真正的美丽

    [1]Beauty is only skin-deep. Physical beauty can only be held fleetingly. Real beauty is much deeper ...

  9. 代码审计-四叶草杯线下awd比赛源码web2

    今晚简单来看看那天比赛的源码吧,比赛的时候还是有些慌没有好好去静下心看代码. awd给的题中的漏洞,都是那种可以快速让你利用拿到权限后得到flag的那种,特别复杂利用的一般没有. 建议先黑盒去尝试,例 ...

  10. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...