<!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. dll库生成和使用

    抄自http://www.cnblogs.com/fangyukuan/archive/2010/06/20/1761464.html 1. VS2010中新建Win32-Win32项目,输入名称Dl ...

  2. 免root xshell连接termux

    免root实现xshell连接termux termux为安卓手机上的一款模拟linux终端的应用,由于手机上打字比较麻烦,所以想到了用电脑上的xshell通过ssh连接termux,以实现电脑控制t ...

  3. Centos 配置eth0 提示Device does not seem to be present -- 转载

    http://www.cnblogs.com/fbwfbi/archive/2013/04/29/3050907.html 移动虚拟机造成网卡无法识别 一.故障现象: [root@c1node01 ~ ...

  4. HTML中的图片标签的用法！

    在HTML中<img>这个标签是定义文本中的图片标签,它的作用就比如说可以提供图片的名字.提供图片的尺寸大小和提供图片的一些图片属性,比如Alt这个属性,可以给图片一个名称来告诉朋友们.这 ...

  5. ubuntu18.04 为应用程序添加桌面图标

    一.桌面图标位置 Lniux下桌面图标储存路径为:/usr/share/applications 二.桌面图标格式 所有桌面图标格式均为desktop,即名为XXX.desktop 三.编辑内容(常用 ...

  6. Vue框架之组件与过滤器的使用

    一.组件的使用 局部组件的使用 ​ 打油诗: 1.声子 2.挂子 3.用 var App = { tempalte:` <div class='app'></div>` }; ...

  7. [Docker][ansible-playbook]3 持续集成环境之分布式部署

    预计阅读时间: 30分钟 本期解决痛点如下:1. 代码版本的多样性,编译环境的多样性如何解决?答案是使用docker,将不同的编译环境images统统打包到私有仓库上,根据需求进行下载,从宿主机上挂载 ...

  8. ubuntu16搭建LAMP环境

    准备工作: 安装ubuntu16虚拟机,可以正常访问网络 更新为国内源(下载快一些) 1.安装apache sudo apt-get install apache2 然后打开我们的浏览器,访问一下 1 ...

  9. vim配置笔记

    1. vim两种配置方法 1)配置文件 全局配置文件:/etc/vim/vimrc或者/etc/vimrc 用户个人配置文件:~/.vimrc 2)命令模式 命令行模式下直接输入配置命令即可.如:se ...

  10. k8s的paas平台

    高可靠设计,Etcd 集群,Kubernetes 三主节点,保证集群的高可用性. 基于 GlusterFS /nfs集群,在生产环境和非生产环境下提供存储卷服务. Flannel+VXLAN,提供可靠 ...