1、绑定class，v-bind:class  简写为：:class

　　对象方式：

<!-- 绑定一个class对象，也可以绑定data中的对象-->
<span v-bind:class="{orange:isorange,  green:isgreen}">abc</span>
<span v-bind:class="colors">def</span>
 data: {
            isorange: true,
            isgreen: false,
            colors: {
                'orange': false,
                'green': true
            }
        }

数组方式：

<span v-bind:class="[orangecolor, big]">abc</span>
<span v-bind:class="[big,colors]">def</span>
data: {
            big: "big",
            orangecolor: "orange",
            colors: {
                'orange': false,
                'green': true
            }
        }

2、绑定style  ,  v-bind:style  简写为：  ：style

　　　　对象方式：

<span v-bind:style="{color:yellowcolor,fontSize:larger}">def</span>
<span v-bind:style="fontsizes">def</span>
data: {
            larger: "30px",
            yellowcolor: "yellow",
　　　　　　　fontsizes: {
　　　　　　　   'fontSize': '40px'
　　　　　　　}
        }

　　数组方式：

<span v-bind:style="[fontsizes,colorstyle]">sss</span>
 data: {

            fontsizes: {
                'fontSize': '40px'
            },
            colorstyle: {
                'color': 'orange'
            }

        }

3、注意在data中写style样式的时候，CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）。

　　整体的例子如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <style>
        .orange {
            color: orange
        }

        .green {
            color: green
        }

        .big {
            font-size: larger;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 绑定一个class对象，也可以绑定data中的对象-->
        <span v-bind:class="{orange:isorange,  green:isgreen}">abc</span>
        <span v-bind:class="colors">def</span>
        <span v-bind:class="[orangecolor, big]">abc</span>
        <span v-bind:class="[big,colors]">def</span>
        <!-- 绑定一个style对象，也可以绑定data中的对象-->
        <span v-bind:style="{color:yellowcolor,fontSize:larger}">def</span>
        <span v-bind:style="fontsizes">def</span>
        <!--数组语法-->
        <span v-bind:style="[fontsizes,colorstyle]">sss</span>
    </div>
</body>
<script type="text/javascript">
    var app1 = new Vue({
        el: "#app",
        data: {
            isorange: true,
            isgreen: false,
            big: "big",
            larger: "30px",
            orangecolor: "orange",
            yellowcolor: "yellow",
            colors: {
                'orange': false,
                'green': true
            },
            fontsizes: {
                'fontSize': '40px'
            },
            colorstyle: {
                'color': 'orange'
            }

        },
        methods: {

        }
    });
</script>

</html>

第七节：Class与Style绑定的更多相关文章

  1. 第7节class与style绑定

    方法一 效果图:  方法二 效果图:  方法三 效果图: 代码: <!DOCTYPE html> <html lang="en" xmlns:v-bind=&qu ...

  2. centos Linux下磁盘管理 parted,df ,du,fdisk,partprobe,mkfs.ext4,mount,/etc/fstab,fsck,e2fsck,mk2efs,tmpfs ,nr_inodes, LVM,传统方式扩容文件系统 第七节课

    centos Linux下磁盘管理   parted,df ,du,fdisk,partprobe,mkfs.ext4,mount,/etc/fstab,fsck,e2fsck,mk2efs,tmpf ...

  3. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  4. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  5. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  6. 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  7. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  8. Knockout.Js官网学习（style绑定、attr绑定）

    Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...

  9. JAVA 从GC日志分析堆内存 第七节

    JAVA 从GC日志分析堆内存 第七节   在上一章中,我们只设置了整个堆的内存大小.但是我们知道,堆又分为了新生代,年老代.他们之间的内存怎么分配呢?新生代又分为Eden和Survivor,他们的比 ...

  10. Style绑定

    目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...

随机推荐

  1. Allegro Out Of Date Shapes原因及解决方法

    使用Allegro设计PCB板时,查看Status,经常会遇到out of date shapes的警告信息,具体如下: dynamic shape is still out of data or e ...

  2. Win7 64下Visual C++ 6.0不兼容

    Win7 64下Visual C++ 6.0不兼容 安装VSE6.0: 1.运行setup.exe安装程序,会弹出如下的的 程序兼容性助手 提示框,这个是Win7在警告用户vc6存在兼容性问题:此程序 ...

  3. checked属性

    使用checked属性,你可以设置复选按钮和单选按钮默认被选中. 为此,只需在input元素中添加属性checked <input type="radio" name=&qu ...

  4. uva-327

    题意:给出一个C语言加减法表达式,求出这个表达式的最终结构,以及各个变量的值,每个变量保证至出现一次,保证输入的字符串合法: 输入:一串包含+.-和小写的26个英文字母: 输出:表达式的结果,以及表达 ...

  5. 命令行解析Crash文件

    做了快两年的开发了,没有写过博客,最近公司app上架,程序崩溃被拒绝了,可是给的crash文件,又看不出哪里的问题,网上各种搜,终于找到了解决的办法,想想还是写个博客吧,希望给哪些也遇到这类问题的朋友 ...

  6. 关于“windows无法自动将ip协议栈绑定到网络适配器”问题导致不能连上网的解决办法

    问题出现的原因:这个问题的直接表象并不是显示给用户这个问题,而是提示无线网络驱动可能有问题或者以太网驱动可能有问题,但只要用户查看”详细信息“,就会得到标题这个问题,而出现这个问题的本质并不是驱动问题 ...

  7. iOS开发零基础--Swift教程 字典

    字典的介绍 字典允许按照某个键来访问元素 字典是由两部分集合构成的,一个是键(key)集合,一个是值(value)集合 键集合是不能有重复元素的,而值集合是可以重复的,键和值是成对出现的 Swift中 ...

  8. hdu 5945 Fxx and game

    青年理论计算机科学家Fxx给的学生设计了一款数字游戏. 一开始你将会得到一个数X,每次游戏将给定两个参数x,k,t, 任意时刻你可以对你的数执行下面两个步骤之一: .X=X−i(<=i<= ...

  9. day11---异步IO\数据库\队列\缓存

    一.RabbitMQ队列 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息 ...

  10. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...