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. Android4.0 Launcher 源码分析1——Launcher整体结构

    1.Launcher整体结构 桌面程序其实并不包含桌面壁纸,桌面壁纸其实是由 WallpaperManagerService来提供,整个桌面其实是叠加在整个桌面壁纸上的另外一个层. 1.1 WorkS ...

  2. Eclipse *的下载（图文详解）

    不多说,直接上干货! 简单了解,Eclipse是绿色软件,下载下来是个压缩包,只需要解压,加上jdk就可以运行了. 相比MyEclipse而言,它是免费的,后者是收费的.各有侧重吧 有很多人用Ecli ...

  3. Java Date SimpleDateFormat

    public static void main(String[] args) { long millis = 1492741275301L; Calendar calendar = Calendar. ...

  4. api.execScript

    在指定 window 或者 frame 中执行脚本,对于 frameGroup 里面的 frame 也有效,若 name 和 frameName 都未指定,则在当前 window 中执行脚本,具体执行 ...

  5. 骆驼拼写法（CamelCase)

    在英语中,依靠单词的大小写拼写复合词的做法,叫做"骆驼拼写法"(CamelCase).比如,backColor这个复合词,color的第一个字母采用大写. 这种拼写法在正规的英语中 ...

  6. vue setTimeout--延迟操作

    有时候我们在查询后要做某些事情,例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候,我们可以对渲染数据的操作进行延迟,因为代码执行的速度是很快的而访问数据的操作相对于渲染的速度慢得多 ...

  7. JPA注解@GeneratedValue

    @GeneratedValue是JPA的标准用法, JPA提供四种标准用法,由@GeneratedValue的源代码可以看出. public enum GenerationType { TABLE, ...

  8. 通过SourceTree连接SSL有问题的自建gitlab服务器

    我用的是 SourceTree 作为Git客户端的,用它连接一个HTTPS证书过期的自建git服务,会收到下面错误: abort: error: _ssl.c:507: error:14090086: ...

  9. 【学习笔记】--- 老男孩学Python，day10, 初识函数 形参、实参

    函数:对功能的封装语法: def 函数名(形参): 函数体 函数名(实参) 函数名:命名规则和变量一样 函数的返回值: return, 函数执行完毕. 不会执行后面逻辑 1. 如果函数中不写retur ...

  10. 在MyBatis中查询数据、涉及多参数的数据访问操作、插入数据时获取数据自增长的id、关联表查询操作、动态SQL、关于配置MyBatis映射没有代码提示的解决方案

    1. 单元测试 在单元测试中,每个测试方法都需要执行相同的前置代码和后置代码,则可以自定义2个方法,分别在这2个方法中执行前置代码和后置代码,并为这2个方法添加@Before和@After注解,然后, ...