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. C/C++ -- Gui编程 -- Qt库的使用 -- 使用小写qDebug调试程序

    qDebug作为printf不需要头文件 qDebug()作为cout要使用头文件<QDebug> -----debug.cpp----- -----debug.cpp----- #inc ...

  2. 在k8s中搭建可解析hostname的DNS服务

    2016-01-25更新 上篇文章总结k8s中搭建hbase时,遇到Pod中hostname的DNS解析问题,本篇将通过修改kube2sky源码来解决这个问题. 1 前言 kube2sky在Githu ...

  3. 解惑《你必须知道的.net》——C#继承关系中【方发表】的创建和调用

    前言: 现在正在读<你必须知道的.net>(第二版)一书,看到IL语言那一章,将call.callvirt和calli时候,书中举了一个例子,是一个三层继承的例子,我一开始看的时候就有点懵 ...

  4. Java虚拟机（三）：JVM垃圾回收机制

    概述 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了. jvm 中,程序计数器.虚拟机栈.本地方 ...

  5. 马尔科夫随机场（Markov Random Field)

    马尔可夫随机场(Markov Random Field),它包含两层意思:一是什么是马尔可夫,二是什么是随机场. 马尔可夫过程可以理解为其当前的状态只与上一刻有关而与以前的是没有关系的.X(t+1)= ...

  6. 照猫画虎owin oauth for qq and sina

    ms随vs2013推出了mvc5,mvc5自带的模板项目中引用了新的身份认证框架 ms identity.其中owin部分实现了google,facebook,twitter等国外常见的第三方用户.可 ...

  7. MySql通用二进制版本在Linux（Ubuntu）下安装与开启服务

    安装mysql前可能需要其他软件的依赖,请先执行下面命令安装mysql的依赖软件 shell> apt-cache search libaio # search for info shell&g ...

  8. Golang beego ORM + CRUP 操作详解

      构建beego Web 项目         首先构建一个beego 的web 项目,这个我们完全可以参考beego 官网中的开发文档,上面介绍的非常的详细,在这我就不给大家介绍,主要是介绍ORM ...

  9. POJ3126(KB1-F BFS)

    Prime Path   Description The ministers of the cabinet were quite upset by the message from the Chief ...

  10. 使用AJAX实现分页

    Fenye.html <!DOCTYPE html> <html> <head> <title>分页</title> </head&g ...