<!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. 命名对象继承2-验证Open*命名对象安全属性的传递

    接上一篇 这次是验证Open*(本文使用OpenMutex函数)的命名对象在继承中安全属性的传递 SECURITY_ATTRIBUTES sa; //设置句柄安全性 sa.nLength = size ...

  2. Enum枚举的使用实现

    业务中涉及到的状态字段或者简单的选择项的使用. 例如: 1.定义enum枚举类. package com.yjl.enums; import java.util.Objects; public enu ...

  3. 06-border

    边框 border:边框,描述盒子的边框 边框的三要素:粗细 线性样式 颜色 例如:border:1px solid red: 如果颜色不写,默认是黑色:如果粗细不写,不显示边框:如果只写线性样式,默 ...

  4. .Net Core自动化部署系列（二）：使用Jenkins打造镜像发布流水线

    一.简介 之前写过一篇关于Jenkins搭配GitLab实现.net core项目自动发布到IIS的博文,比较简单哈,只是个Demo.本篇我们将会使用Jenkins搭配GitLab实现镜像的自动打包和 ...

  5. vue中"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序"的报错

    在vue项目中发现了这个报错  解决办法将项目里的“node_modules”文件夹删除,然后重新运行cnpm install

  6. 利用基本数据封装类（如：Integer,Float）等实现数据类型转换

    /** * 利用基本数据封装类进行数据类型转换 * @author dyh * */ public class TypeConversion { public static void main(Str ...

  7. Linux被中断的系统调用

    慢系统调用,指的是可能永远无法返回,从而使进程永远阻塞的系统调用,比如无客户连接时的accept.无输入时的read都属于慢速系统调用. 在Linux中,当阻塞于某个慢系统调用的进程捕获一个信号,则该 ...

  8. SoapUI 的几种常用参数化方式

    今天给大家来梳理下soapui这款工具关于参数化的几种方式以及具体的应用场景 1.properties 官方文档:https://www.soapui.org/docs/functional-test ...

  9. 阿里云服务器ecs + tomcat + 域名解析 部署web页面

    1.购买ecs:https://www.aliyun.com/product/ecs?spm=5176.12825654.eofdhaal5.2.3bf92c4aYOB7gL&aly_as=A ...

  10. 如何在Java中创建数组列表

    为了在Java中存储动态大小的元素,我们使用了ArrayList.每当添加新元素时,它会自动增加它们的大小.ArrayList实现Java的List接口和Java的Collection的一部分. 由于 ...