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. 搜索引擎 ElasticSearch 之 步步为营 【主目录】

    ElasticSearch 是一款著名的分布式搜索引擎框架,采用Java编写.具有搜索速度快,实时搜索等特色. 以下为官网对ElasticSearch的介绍: Elasticsearch 是一款高可伸 ...

  2. (转)CentOs上配置samba服务

    前 言 在我们使用 Windows 作为客户机的时候,通常有文件.打印共享的需求.作为Windows 网络功能之一,通常可以在 Windows 客户机之间通过 Windows Network 固有的功 ...

  3. Access 2003下载地址和密钥

    电驴下载链接:ed2k://|file|sc_access_2003.iso|645523456|63AA6C30D609FDC22D056C4B424283F9|/ 安装SN: HH74C-P8F7 ...

  4. DFS security warning and use group policy to set up internet security zones

    Opening a file from a DFS domain share shows a security warning while openning from the server share ...

  5. Linux内核--网络栈实现分析（八）--应用层发送数据（下）

    本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7547826 更多请查看专栏,地 ...

  6. leetcode sort List

    Sort a linked list in O(n log n) time using constant space complexity. /** * Definition for singly-l ...

  7. Java jstatd详解

    jstatd 命令全称: Virtual Machine jstat Daemon DESCRIPTION The  jstatd tool is an RMI server application ...

  8. word 多级列表设置

    今天写论文碰到了这个问题, 希望能出现这样的效果: 第一章 1.1 1.2 第二章 2.1 2.2 ...... 为了达到这个效果,晕死了.因为我的标题不是普通的默认标题一标题二   比如同济一标题 ...

  9. 关于placeholder中 文字添加换行 用转义字符&#13;&#10;代替<br>

    今天遇到一个问题 UI给的效果图中 文本域的提示文字 是两行显示, 于是就想到placeholder中能否解析html标签, 尝试后发现并无卵用, 经过调查后发现 可以用转义字符代替<br> ...

  10. ubuntu vps折腾记

    买了burgetVM的vps,512M内存/1024M交换内存,40G硬盘,2TB流量/月,cpu xeon E5-2620 操作系统选择了ubuntu 12,开始折腾. 第一步,配置vpn 找了很多 ...