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. 20151013 C# 第一篇 流程控制语句

    20151013 流程控制语句: 1.选择语句 if … else if...else 选择语句 if(布尔表达式){  语句块:} if(布尔表达式){  语句块1:}else{  语句块2:} i ...

  2. 黑马程序员_Java基础：集合总结

    ------- android培训.java培训.期待与您交流! ---------- 一.集合概念 相信大家都知道,java是一门面向对象的编程语言,而对事物的体现都是以对象的形式,所以为了方便对多 ...

  3. Global文件编译发布，代码不执行的问题与解决

    问题:在Application_BeginRequest添加防止跨站点注入的过滤代码,VS2005编译成DLL发布后发现代码不会被执行: 环境:windows server 2008 r2 x64位  ...

  4. hdu 3065 AC自动机

    // hdu 3065 AC自动机 // // 题目大意: // // 给你n个短串,然后给你一个长串,问:各个短串在长串中,出现了多少次 // // 解题思路: // // AC自动机,插入,构建, ...

  5. [Leetcode][JAVA] Convert Sorted Array to Binary Search Tree && Convert Sorted List to Binary Search Tree

    Convert Sorted Array to Binary Search Tree Given an array where elements are sorted in ascending ord ...

  6. ios申请真机调试( xcode 5)详细解析

    已经有开发证书的直接跳过第一步 第一步:申请"开发证书" 进入苹果开发者99美元账号: 选择:Certificates, Identifiers & Profiles 关于 ...

  7. 【转】Wince中文乱码解决方法

    http://www.cnblogs.com/we-hjb/archive/2008/11/27/1342651.html 如果WinCE的默认语言是英语,也没有支持MUI的话,很多中文的应用程序就不 ...

  8. JAVA使用POI操作excel

    文中处理的excel是2003年以前的版本,使用HSSFworkbook,如果处理2007版本以后的excel,用XSSFworkbook,对于二者的兼容性问题,可参考 http://blog.csd ...

  9. Jexus web server V5.4.5 已经发布

    Jexus 是运行于 Linux/FreeBSD 平台的一款以支持 ASP.NET 为主要特色的,同时非常重视安全性和稳定性的高性能 WEB 服务器.最新版 5.4.5 已经发布,官方网站是:www. ...

  10. 一次与51aspx客服MM谈话 -- 坑是怎么发展的

    GG从发布以来,我每次版本更新都会同步到51aspx源码网站,这次在同步更新GG V3.2版本到51aspx时,出了点小状况: 上传3.2版本几个小时后,我再次上去查看,发现其状态变成了“退回”,于是 ...