<!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. 错误 4 error C2039: “Sleep”: 不是“boost::this_thread”的成员

    检查是否是在x64下运行的. #include <pcl/io/openni2_grabber.h> #include <pcl/visualization/cloud_viewer ...

  2. 3_PHP表达式_5_数据类型转换_类型自动转换

    以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. PHP类型转换分为类型自动转换和类型强制转换. 1.布尔型数据参与算数运算时,TRUE被转换为整数1,FALSE被 ...

  3. 【转载】C#将字符串中字母全部转换为大写或者小写

    在C#的编程开发过程中,有时候判断字符串是否相等时,并不关注字母的大小写,此时在C#中可以使用ToUpper方法将字符串中所有的字母转换为大写,使用ToLower方法可以将字符串中所有字母转换为小写. ...

  4. 关于iview下拉菜单无法添加点击事件的解决办法

    效果如下图所示,点击下拉菜单,点击退出,然后跳到登录界面 代码如下: <Dropdown trigger="click" style="margin-left: 2 ...

  5. element-ui DatePicker 日期选择器 让结束日期大于开始日期

    element-ui  DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...

  6. weblogic jdbc 相关概念介绍

    weblogic jdbc 是什么? 如何配置? 常见问题? 如何监控?

  7. Vue指令之`v-model`和`双向数据绑定

     v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定 <input type="text" v-bind:value="msg& ...

  8. rabbitmq笔记（一）rabbitmq简介及基础

    一.消息组件 如果从消息组件来讲主要划分位两类: 1.JMS组件:ActiveMQ(慢): 2.AMQP组件(协议):性能是最高的, 而AMQP有两个主要的开源: 1)RabbitMQ:使用最广泛,速 ...

  9. php 图片与base64互转

    header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 $image_file = '1.png'; $image ...

  10. 001——搭建OpenCV实验环境

    开发环境 VS 2017 15.7.6 OpenCV 3.4.1 搭建环境 设置环境变量 创建Win32 空项目 配置属性管理器 测试代码 #include<opencv2/opencv.hpp ...