<!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. python学习笔记（CMD运行文件并传入参数）

    好久没更新博客了 最近换了份新工作 有时间来整理一篇 在命令行CMD中执行文件过程中如何传入并识别参数 # -*- coding: utf-8 -*- # CMD运行类 # 作者: # 时间: 201 ...

  2. 怎样修改element-ui中的样式？

    方法一 方法二 使用  /deep/ .homePage /deep/ .el-main { padding: 0;  } .homePage为我们要修改组件类名的父级组件样式类名..即使定义一个空的 ...

  3. SDL 实现多线程 的一些BUG

    1. SDL_init()  在多个线程初始化的时候  , 在第二个线程出现SDL_init 崩溃的现象  SDL init  错误码:0XFFFFFFFF 2. SDL_init() 如果只初始化一 ...

  4. python数据统计出海品牌

    当国内市场处于红海之中时,市场全球化已成为大势所趋.越来越多的国产品牌远走高飞,纷纷将品牌拿出来. 2019年,中国品牌十大品牌中,华为品牌力指数同比增长22%,阿里巴巴品牌力指数增长48%,小米品牌 ...

  5. ABAP-信息结构S901/S902程序问题

    1.问题 信息结构请求传入正式环境后,RMCX0070/RMCX0071程序执行DUMP,无法调用程序SAPFMCBF中的子FORM程序 MCB1_901 或是 MCB2_901 . 2.经查SAPF ...

  6. kubernetes 应用快速入门

    使用kubectl进行增.删.查.改等常用操作 查看kubectl命令帮助 kubectl -h kubectl controls the Kubernetes cluster manager. Fi ...

  7. L ==> E · L · K

    三剑客:Elastic Stack 在学习ELK前,先对 Lucene作基本了解. 今天才知道关系型数据库的索引是 B-Tree,罪过... 减少磁盘寻道次数 ---> 提高查询性能 Lucen ...

  8. Vue + Springboot 开发的简单的用户管理系统

    后台接口如下: 页面如下: 1. 主页,显示所有的用户信息 2. 点击详情,看到某个id的用户的详细信息 3. 点击编辑按钮,跳转到的详细的编辑(更新)页面 4. 添加用户页面 对应的vue代码如下 ...

  9. Write-Off

    What is a Write-Off? Write-offis an accounting term referring to an action whereby the book value of ...

  10. 【转】angular使用代理解决跨域

    原文:https://www.cnblogs.com/sghy/p/9111293.html ----------------------------------------------------- ...