<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .active{

            color: red;

        }

        .active2{

            background: yellow;

        }

    </style>

</head>

<body>

    <!--mvvm里面的v-->

    <div id="app">

        <div :class="{active:color,active2:bgco}">

            你好

        </div>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script >

        //这是mvvm里面的vm

        var vm=new Vue({

            el:'#app',

           //这是mvvm里面的m

            data:{

                color:true,

                bgco:true

            }

        })

    </script>

</body>

</html>

vue中class用法的更多相关文章

  1. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  2. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  3. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  4. swiper在vue中的用法

    首先通过npm i vue-awesome-swiper --save 来在vue中下载插件 然后再main.js中引入 require('swiper/dist/css/swiper.css')im ...

  5. Vue中import用法

    1. 引入第三方插件 第三方常用插件参考https://blog.csdn.net/vbirdbest/article/details/86527886 2. 导入 css 文件 import 'iv ...

  6. Vue中computed用法

    computed是什么?对于任何复杂逻辑,你都应当使用计算属性.computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义.然后就可以在页面上进行双向数据绑定展 ...

  7. 分享vue中 slot用法

    //slot默认用法 //slot带参数name用法

  8. momentjs在vue中的用法

    js代码 import moment from 'moment'; const jsCountDown = document.getElementById('js-countdown'); const ...

  9. vue中keep-alive的用法

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...

随机推荐

  1. iOS - Objective-C 关联(objc_setAssociatedObject、objc_getAssociatedObject、objc_removeAssociatedObjects）

    关联是指把两个对象相互关联起来,使得其中的一个对象作为另外一个对象的一部分. 关联特性只有在Mac OS X V10.6以及以后的版本上才是可用的. 在类的定义之外为类增加额外的存储空间 使用关联,我 ...

  2. 【转载】Asp.Net中应用程序的事件响应次序

    Asp.Net应用程序事件响应次序是指Application事件的相应次序,涉及到的事件包括Application_Start事件.BeginRequest事件.AuthenticateRequest ...

  3. springboot 常见的启动器

    <!--pringBoot提供了一个名为spring-boot-starter-parent的工程, 里面已经对各种常用依赖(并非全部)的版本进行了管理 我们的项目需要以这个项目为父工程,这样我 ...

  4. Pandas-高级部分及其实验

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/11014893.html jupyter代码原文 ...

  5. Qt QPushButton 背景色

    正常状态:黑底(背景色),白字(前景色),圆角,向外凸起 鼠标停留:背景和前景反色 鼠标按下:背景色变为淡蓝色,向内凹陷 ui->pushButton->setStyleSheet(&qu ...

  6. Java中异常关键字throw和throws使用方式的理解

    Java中应用程序在非正常的情况下停止运行主要包含两种方式: Error 和 Exception ,像我们熟知的 OutOfMemoryError 和 IndexOutOfBoundsExceptio ...

  7. 异常-Maxwell无法全量同步触发

      因为之前插入错误的表导致同步失败的问题     重新启动Maxwell,重新插入初始化表 重新触发 

  8. Linux命令——killall 、kill 、pkill、xkill

    参考:killall .kill .pkill 命令详解 Using kill, killall, and pkill 4 Ways to Kill a Process – kill, killall ...

  9. 安装完conda后，进入终端显示(base)

    通过配置auto_activate_base关闭自动进入conda基础环境: conda config --set auto_activate_base false 想要重新开启就设为true就行了 ...

  10. RxJava 以及 Android 中的通用线程解决方案、并发与线程安全

    关于RxJava如今是熟到发紫了,所以对于它底层的动作机制的了解是迫在眉睫了,费话不多说,直接开始. 这里还是以之前获取个人github仓库列表为例,用retrofit+rxjava,也是实际项目中用 ...