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. Spring 学习笔记 8. 尚硅谷_佟刚_Spring_使用外部属性文件

    1,配置数据源 (1)添加驱动 (2)编写spring配置文件 <bean id="dataSource" class="org.springframework.j ...

  2. iOS进阶_三方使用步骤

    一.配置环境(:后为在终端输入的命令) 打开终端 查看自己电脑的Ruby环境:gem sources -l 如果环境已经是淘宝镜像了,此时不需要再进行环境的修改. 如果不是,发送gem sources ...

  3. Chrome: Resource interpreted as Font but transferred with MIME type font/x-woff

    最近,项目中加入了Bootstrap进行界面优化,但是,项目加载运行之后,控制台总是提示以下错误信息: GET http://localhost:8080/.../fonts/fontawesome- ...

  4. Android addHeaderView和setAdapter的调用顺序后报错

    在4.4之前的系统,setAdapter后再设置addHeaderView会爆 ListView想要添加headerview的话,就要通过addHeaderView这个方法,然后想要为ListView ...

  5. ssh端口转发

    http://blog.sina.com.cn/s/blog_47094def0101fvge.html

  6. SQL 常用语句

    替换表中某个字段中的某些字符:(将ConfigValue列中的A值替换为B) update SysConfigParams set ConfigValue=replace(ConfigValue,'A ...

  7. Linux内核--网络栈实现分析（十一）--驱动程序层（下）

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

  8. iOS 直播类APP开发流程分解：

    1 . 音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放显示1.数据采集:摄像机及拾音器收集视频及音频数据,此时得到的为原始数据涉及技术或协议:摄像机:CCD.C ...

  9. VS2012 编译带有c/c++代码的python模块失败解决方案

    python2.7默认编译带有/c++代码的模块/包是使用VS2008环境变量,所以为了可用,我们要在编译前设置环境变量 SET VS90COMNTOOLS=%VS110COMNTOOLS% 但有时只 ...

  10. [Xamarin] 從Xamarin中呼叫 *.jar 的 library - 呼叫篇 (转帖)

    上篇文章我們建立一個很簡單的Library : com.example.blackfactory.UtilFunc 現在我們要在Xamarin 中呼叫囉! 首先我們要先成立一個橋接的專案 JARBri ...