1.用法

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

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

    <script type="text/javascript">

        window.onload = function(){

            var vm = new Vue({

                el:'#box',

                data:{

                    color:'color',      //值color是定义的样式名

                    background:'background',

                    test:{color:"#666", fontWeight:"bold"}

                },

            });

        }

    </script>

    <style type="text/css">

        .color{color: #000}

        .background{background: #ccc}

    </style>

</head>

<body>

    <div id="box">

        <!-- v-bind可省略 -->

        <!-- class -->

        <span v-bind:class="color">方式1</span>  等价 <span :class="color">方式1</span>  

        <br>

        <span v-bind:class="[color,background]">方式2</span>

        <span v-bind:class="{color:true}">方式3</span>

        <!-- 样式 -->

        <span v-bind:style="test">方式3</span>

    </div>

</body>

</html>

注意：分清楚

:class   这个是class标签

:style   这个是样式标签

Vue2学习笔记:class和style的更多相关文章

  1. Vue2 学习笔记1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  2. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  3. vue学习笔记 样式 class style（五）

    使用v-bind数据绑定class和style,v-bind:class可以与传统的class属性共存,其中可以用{}设置多个class,根据条件判断的语法是class名:条件,带-的class名需要 ...

  4. Vue2 学习笔记4

    文中例子代码请参考github 父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewM ...

  5. Vue2 学习笔记3

    文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...

  6. Vue2学习笔记:过渡效果css

    过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html ...

  7. Vue2学习笔记:键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  8. Vue2学习笔记:v-show指令

    v-show指令:v-show="true/false" 控制元素显示/隐藏 1.使用 <!DOCTYPE html> <html> <head> ...

  9. Vue2学习笔记:实例

    1.实例 <!DOCTYPE html> <html> <head> <title></title> <script src=&quo ...

随机推荐

  1. 带你了解数据库中事务的ACID特性

    前言 前面我们介绍过数据库中 带你了解数据库中JOIN的用法 与 带你了解数据库中group by的用法的相关用法.本章节主要来介绍下数据库中一个非常重要的知识点事务,也是我们项目中或面试中经常会遇到 ...

  2. redis 安装 与错误解决办法

    redis 安装与安装中遇到的错误 redis 安装 wget http://download.redis.io/releases/redis-4.0.11.tar.gz .tar.gz cd red ...

  3. java-TreeSet进行排序的2种方式

    TreeSet和HashSet的区别在于, TreeSet可以进行排序, 默认使用字典顺序排序, 也可以进行自定义排序 1, 自然排序 2, 比较器排序 自然排序: 1, 需要被排序的类实现Compa ...

  4. Qt5 编程基础

    Qt 是一个C++ GUI应用框架,Qt 具有良好的可移植性支持大多数桌面和移动操作系统并常用于嵌入式开发. Qt的发行版分为商业版和开源版,提供了Qt Creator作为轻量级IDE. Hello ...

  5. 15.Generator 函数的语法

    Generator 函数的语法 Generator 函数的语法 简介 基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同.本章详细介绍 Generat ...

  6. 【转】实现Sqlite datediff日期时间相减的方法

    对sqlite既恨又爱,在小项目里,用sqlite开发起来非常方便,效率足够用.美中不足的是sqlite精简了些功能及相关函数.如存储过程,datediff,不支持并发写入及远程访问(或许有些高手说这 ...

  7. 2 duplicate symbols for architecture“文件冲突”

      我在配置第三方库拷贝示例文件中的库文件到新项目完成相关配置之后报下面的错误:   错误的原因是在解决问题之后发现的(第三方库的项目示例demo中的 要拷贝到自己项目中的库  并不需要全部添加到自己 ...

  8. Spring系列之——Spring事务以及两大核心IOC和AOP

    1 Spring事务 1.1 Spring事务是什么(百度) 事务是对一系列的数据库操作(比如插入多条数据)进行统一的提交或是回滚操作,如果插入成功,那么一起成功,如果中间一条出现异常,那么回滚之前的 ...

  9. 南阳nyoj 509 因子和阶乘

    因子和阶乘 时间限制:1000 ms  |  内存限制:65535 KB 难度:2  http://acm.nyist.net/JudgeOnline/problem.php?pid=509 描述 给 ...

  10. mysql数据库定时任务

    应用系统运行中,经常需要定时执行一些任务,例如:定时更新汇总数据,定时更新状态数据等,目前 Treesoft数据库管理系统 增加[定时任务]功能,直接通过页面简单配置,即可按调度规则定时执行SQL任务 ...