<!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. 关于IDEA的maven没有artifacts的解决方法

    做如下配置即可 settings-->bulid...-->Bulid Tools --> Maven-->Improting-->选中Impor Maven proje ...

  2. 品Spring：bean工厂后处理器的调用规则

    上一篇文章介绍了对@Configuration类的处理逻辑,这些逻辑都写在ConfigurationClassPostProcessor类中. 这个类不仅是一个“bean工厂后处理器”,还是一个“be ...

  3. 基于操作系统原理的Linux 的基本操作和常用命令的使用

    一.实验目的 1．学会不同Linux用户登录的方法. 2．掌握常用Linux命令的使用方法. 3．了解Linux命令中参数选项的用法和作用. 二.实验内容 1． 文件操作命令 (1) 查看文件与目录 ...

  4. Spring boot 官网学习笔记 - Auto-configuration（@SpringBootApplication、@EnableAutoConfiguration、@Configuration）

    Spring Boot auto-configuration attempts to automatically configure your Spring application based on ...

  5. Spring 梳理-MVC-配置DispatcherServet和ContextLoaderListener

    在使用JavaConfig时,AbstractAnnotationConfigDispatcherServletInitializer会自动注册 DispatcherServlet 和 Context ...

  6. 【ADO.NET基础-Regidter】简单的账户注册界面和源代码（可用于简单面试基础学习用）

    在阅读时如有问题或者建议,欢迎指出和提问,我也是初学者......... 前台代码: <!DOCTYPE html> <html xmlns="http://www.w3. ...

  7. CSS 换行

    默认情况下,元素的属性是 white-space:normal:自动换行:(不把单词截断,会把单词看作一个整体) -----但是但是但是但是..当元素中的内容是一对没有空格的字符/数字时,超过容器宽度 ...

  8. 使用scm-manager搭建git/svn 代码管理仓库

    使用 scm-manager 搭建 git/svn 代码管理仓库 1.在官网上下载scm-manager 下载地址https://www.scm-manager.org/download/ 2. 配置 ...

  9. 常用css总结

    个人博客: https://chenjiahao.xyz 1.让网站快速变灰 html { filter: grayscale(100%);//IE浏览器 -webkit-filter: graysc ...

  10. redis等缓存

    文章出处 https://www.cnblogs.com/wupeiqi/articles/5246483.html Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: ...