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. CSS3中的pointer-events

    今天做项目中偶然误把元素加上了pointer-events属性,结果导致后来在js中给该元素加点击事件不能用,检查了半天才发现是这个属性的问题.之前没有好好研究,于是决定仔细研究一下. 一.定义及语法 ...

  2. http编程（一）使用javaAPI实现

    Java Http编程中常见的实现方式是使用Java 提供的API,另外就是使用Apache提供的 API 1.通过Java提供的API实现Http编程 类:URL:类 URL 代表一个统一资源定位符 ...

  3. 移动端模拟hover

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...

  4. mysql 存储过程，函数，触发器

    存储过程和函数 mysql> HELP CREATE PROCEDURE; Name: 'CREATE PROCEDURE' Description: Syntax: CREATE [DEFIN ...

  5. web前端html快速入门

    HTML 学前端之间不得不知道一个网站:http://www.w3school.com.cn/ 网上有很多教程关于前端的,写的特别详细,也写的特别好.我们应该要自已理解,一些相应的前端的知识,不能只是 ...

  6. javascript快速入门1--JavaScript前世今生,HelloWorld与开发环境

    JavaScript历史 大概在1992年,一家称作Nombas的公司开始开发一种叫做C--(C-minus-minus,简称Cmm)的嵌入式脚本语言. Cmm背后的理念很简单:一个足够强大可以替代宏 ...

  7. 7-nginx-keepalived配置主从双击热备

    nginx的高可用解决方案 keepalive 是 VRRP 协议的完美实现, 通过vip(虚拟ip)来实现主从双击热备, 自动切换的高可用方案, nginx的主从是通过keepalived实现的 通 ...

  8. 为镜像添加SSH服务

    操作Docker容器介绍了一些进入容器的办法,比如attach.exec等命令,但是这些命令都无法解决远程管理容器的问题.因此,当需要远程登录到容器内进行一些操作的时候,就需要SSH的支持了. 如何自 ...

  9. DC综合及仿真验证和DFT测试

           综合技术是提高设计产能的一个很重要的技术,没有综合技术的发展就不可能用HDL实现电路的设计,因为HDL开始是用来供电路仿真建模使用的,到了后来才把其中一部分子集作为可综合的语言,也就是R ...

  10. Java线程池，你了解多少？

    一.前言 随着业务的发展,单线程已经远远不能满足,随即就有多线程的出现.多线程虽然能解决单线程解决不了的事情,但是它也会给你带来额外的问题.比如成千上万甚至上百万的线程时候,你系统就会出现响应延迟.卡 ...