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. Spark源码的编译过程详细解读(各版本)（博主推荐）

    不多说,直接上干货! 说在前面的话   重新试多几次.编译过程中会出现下载某个包的时间太久,这是由于连接网站的过程中会出现假死,按ctrl+c,重新运行编译命令.  如果出现缺少了某个文件的情况,则要 ...

  2. python笔记05-----函数

    函数 编程序语言中函数定义:函数是逻辑结构化和过程化的一种编程方法 def func(i): # def :定义函数的关键字:func:函数名:()内可以定义形参 i += 1 # 代码块或程序处理逻 ...

  3. paxos协议更新日志

    基于Paxos协议的数据同步与传统主备方式最大的区别在与Paxos只需任意超过半数的副本在线且相互通信正常,就可以保证服务的持续可用,且数据不丢失. Basic paxos协议更新日志 我们将数据持久 ...

  4. 在Struts2标签s:textfield中显示正确的日期

    Java代码   struts2中的日期期输入显示问题   struts2 中的默认的日期输出并不符合我们的中文日常习惯.以下是我知道的在struts2中进行日期格式化输出的几种方式. 1.利用 &l ...

  5. json 只能用 for-in 遍历

    [JS] var json1 = { 'name' : 'yy' , 'age' : 11 , 'fun' : '前端开发' }; for( var attr in json1 ) { alert( ...

  6. Object-C语言Block的实现方式

    开场白 Block基本概念 中间态转换方法 Block编译后结果分析 Block运行时状态与编译状态对比   开场白   Object-C语言是对C语言的扩展,所以将OC源码进行编译的时候,会将OC源 ...

  7. PHP 集成开发环境比较

    专注了这么些年技术,没有养成记录和积累的习惯.如今乐于开源和分享经验,却停笔踌躇,不知该从何处说起.开通博客也有一段时间了,也没能写出一篇像样的文章,其实这篇文章也是被我拉壮丁似的用来练手的.思前想后 ...

  8. C#中is与as的区别分析

    这篇文章主要介绍了C#中is与as的区别,较为详细的分析了is与as的原理与特性及用法区别,具有很好的学习借鉴价值,需要的朋友可以参考下 本文实例分析了C#中is与as的区别,分享给大家供大家参考.具 ...

  9. Mapped Statements collection does not contain value for 问题的解决

    在做SSM项目的时候,遇到MyBatis抛出的一个异常: Mapped Statements collection does not contain value for org.lyk.vo.mapp ...

  10. ARC基本原理

    基本简介 ARC是Automatic Reference Counting(自动引用计数器)的简称. ARC是ios5.0引入的新特性,完全消除手动管理内存的繁琐,编译器会自动在适合的代码里面插入适当 ...