<!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 - Scenekit3D引擎初探之 - 导入模型+上传服务器+下载并简单设置

    SceneKit是ios8之后苹果推出了一个3D模型渲染框架. SceneKit现在可以支持有限的几种模型,截止到我写这篇文章为止似乎只有.dae和.abc后一种模型我没有使用过.这篇文章只针对.da ...

  2. java模板模式项目中使用--封装一个http请求工具类

    需要调用http接口的代码继承FundHttpTemplate类,重写getParamData方法,在getParamDate里写调用逻辑. 模板: package com.crb.ocms.fund ...

  3. 关于下载gitbash客户端

    gitbash的安装包找不到了,最近又在准备新机器的环境,需要安装git客户端. https://www.git-scm.com/,网址找到了,但是下载非常缓慢.搜了一下,都是改host,但是改了也没 ...

  4. linux查看日志报错

    查看运行时错误: tail  -f  catalina.out   | grep   -C   10  'Exception'          10是行数: 单引号里面的是要查找的关键字:

  5. laravel模型关联评论

    用户模型 public function show(Post $post,LogManager $log){ $post->load("comments"); //这种方式是 ...

  6. Java中关于String类型的一些思考

    作为初学者在学习Java的时候,变量类型是不可避免会遇到的,在以往我们的印象中字符串String都是作为基本类型而存在的,但是在Java中String类型确是一个实实在在的引用类型,是可以通过new关 ...

  7. 第五周作业：markdown语法小总结

    第五周作业 markdown语法总结 早就想写这么一个文章了,关于markdown的语法,因为最近使用的比较多,所以特地总结一下 一,标题 首先要介绍的就是标题, 标题一共有六级 # h1 ## h2 ...

  8. 2018 ACMICPC上海大都会赛重现赛 H - A Simple Problem with Integers (线段树，循环节)

    2018 ACM 国际大学生程序设计竞赛上海大都会赛重现赛 H - A Simple Problem with Integers (线段树,循环节) 链接:https://ac.nowcoder.co ...

  9. Linux网络编程综合运用之MiniFtp实现(五)

    转眼兴奋的五一小长假就要到来了,在放假前夕还是需要保持一颗淡定的心,上次中已经对miniFTP有基础框架进行了搭建,这次继续进行往上加代码,这次主要还是将经历投射到handle_child()服务进程 ...

  10. js 面向对象之属性描述符

    上回介绍了面向对象之构造器属性.这次介绍下属性描述符 遍历对象属性 let person = {name: "lisi"} for (key in person) { consol ...