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. web前端之JavaScript

    JavaScript概述 JavaScript历史 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司.由于网景公司希望能在静态HTML ...

  2. 解决iptables nat sctp协议无效的问题

    环境组网如下: A----->B-----C IP如下: A:1.1.1.1 B:1.1.1.2; 2.2.2.1 C:2.2.2.2 需求为,A 需要使用sctp连通C 在B机器上添加ipta ...

  3. java获得当前日期是今年的第几周，以及这周的开始日期的方法

    直接上代码,备份使用         时间戳,长整型存储             long startTime1 = 1530613938532l;             Calendar cale ...

  4. Vue前端框架面试问题

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答 ...

  5. 推荐的bootstrap之 formgroup表单布局样式

    一直没能找到比较好的Form Group样式,直到找到如下样式 转自 https://www.cnblogs.com/jokerjason/p/5721349.html <form class= ...

  6. 微信小程序之特殊效果及功能

    一.下拉刷新效果 假设页面为index文件,那么代码如下: index.json: { "enablePullDownRefresh": true } index.js: //下拉 ...

  7. vue-webpack 做出来的项目部署到服务器上，点开是空白页（我这里把项目发布到git上）

    总结1: 从网上下的很多demo,用npm run dev 就可以启动项目,比如:vue-cli,为什么?因为vue-cli自动帮我们安装了express服务器. 总结2: npm run dev 是 ...

  8. Angular CLI 安装和使用以及安装失败的解决方法

    背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line I ...

  9. 防止TableView 上的tap手势隔断 cell的选择

    遵循UIGestureRecognizerDelegate协议: 1.0添加手势   - (void)addTapGest {    UITapGestureRecognizer *tap = [[U ...

  10. nginx 错误日志分析

    502 1.查看nginx错误日志 tailf /data/log/nginx/error.log // :: [error] #: * recv() failed (: Connection res ...