<!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. 小鸟初学Shell编程（七）变量引用及作用范围

    变量引用 那么定义好变量,如何打印变量的值呢?举例下变量引用的方式. ${变量名}称作为对变量的引用 echo ${变量名}查看变量的值 ${变量名}在部分情况下可以省略成 $变量名 [root@li ...

  2. 关于.NET HttpClient方式获取微信小程序码（二维码）

    随着微信小程序的火热应用,市面上有关小程序开发的需求也多了起来.近来分析了一项生成有关生成微信小程序码的需求——要求扫码跳转到小程序指定页面(带参数):看了下小程序官方文档文档,结合网上的例子,未看到 ...

  3. jobs后台任务

    前台作业:占据了命令提示符,就是你当前可以操作的作业后台作业:启动之后,释放命令提示符,后续的操作在后台完成 前台——>后台 ctrl+z:把正在前台的作业送往后台,这时作业的状态是暂停. CO ...

  4. js 验证数据类型的4中方法

    1.typeof  可以检验基本数据类型 但是引用数据类型(复杂数据类型)无用: 总结 : typeof  无法识别引用数据类型  包括 bull; 2.instanceof是一个二元运算符,左操作数 ...

  5. 你真的懂Spring Java Config 吗？Full @Configuration vs lite @Bean mode

    Full @Configuration和lite @Bean mode 是 Spring Java Config 中两个非常有意思的概念. 先来看一下官方文档关于这两者的相关内容: The @Bean ...

  6. 最近学到的Git知识，大厂的Git机制还是很方便的

    本文首发于微信公众号:程序员乔戈里 转载请注明:https://blog.csdn.net/WantFlyDaCheng/article/details/102538508 一.两次的 git com ...

  7. css3——box-sizing属性

    很多朋友们可能会疑惑,不知道box-sizing属性是有什么作用,自己也很少会用到,但是想必不少人在做网页布局的时候经常遇到一个问题就是我明明设置了父元素设置了假如是宽高500px,5个子元素左浮动设 ...

  8. SQL SERVER 还原误操作导致还原无法停止，处理办法

    昨天遇到运行库不知道单位哪个小伙子,把数据库还原了,导致单位业务全部瘫痪,主数据库一直显示正在还原,真的是不敢动,经过多方寻找,找到此脚本-------------------------数据库还原日 ...

  9. python-犯傻合集

    1.题目: 基于文件实现用户登录程序,提示用户输入用户名和密码,检查用户名是否存在,以及用户名密码是否正确 保存密码的文件叫user.txt,内容:   |  作分隔符 阶段一: 自己第一次的答案: ...

  10. 学以致用，通过字节码理解：Java的内部类与外部类之私有域访问

    目录: 内部类的定义及用处 打开字节码理解内部类 一.内部类的定义及用处 内部类(inner class)是定义在另一个类中的类.使用内部类,我们可以: 访问该类定义所在的作用域中的数据,包括私有的数 ...