<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>使用object与array控制class</title>

    <script src="vue.js"></script>

</head>

<body>

<style>

    .green{color: green}

    .color{

        color: red;

    }

    .font{font-size: 50px;}

</style>

<div id="lantian">

    <h1 :class="lt">

        科技中国

    </h1>

    <hr>

    <h1 class="green" :class="{color:false}">

        科技中国

    </h1>

    <hr>

    <h2 :class="['color','font']">www.baidu.com</h2>

    <hr>

    <h2 :class="[success,font]">www.baidu.com</h2>

</div>

<script>

    var app = new Vue({

        el: '#lantian',

        data: {

            lt:{color:true,font:true},

            success:'color',

            font:'font'

        }

    });

</script>

</body>

</html>

　　

011——VUE中使用object与array控制class的更多相关文章

  1. Vue props中Object和Array设置默认值

    Vue中,在props中设置Object和Array的默认值 seller: { type: Object, default() { return {} } } seller: { type: Obj ...

  2. Vue中Object和Array数据变化侦测原理

    在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...

  3. Vue组件库新增的prop属性类型是Object或者Array时默认值的设置

    在Vue开发中提供组件库时常常需要添加相关属性,用来接收父组件向子组件传递的数据,通常也会给属性设置默认值,那么当属性的类型是Object或者Array类型时如何设置默认值比较合理呢?下面将揭晓这一过 ...

  4. 实现一个函数clone，可以对JS中的5种数据类型（Number、String、Object、Array、Boolean）进行值复制

     实现一个函数clone,可以对JS中的5种数据类型(Number.String.Object.Array.Boolean)进行值复制

  5. js中或者vue中 Object.assign()用法详解

    Object.assign()是浅拷贝. 合并对象 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object. ...

  6. 实现一个函数clone，使JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

    实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制. 1 /** 对象克隆 2 * 支持基本 ...

  7. PHP中把stdClass Object转array的几个方法

    方法一: 复制代码代码如下: //PHP stdClass Object转array function object_array($array) { if(is_object($array)) { $ ...

  8. [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  9. Vue中控制更新的方式

    一.  强制更新的实例方法   vm.$forceUpdate() 迫使 Vue 实例重新渲染.注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件. 在没有留意到数组或对象的变更检测注意事 ...

随机推荐

  1. Linux（4）- centos7安装python3、Linux下安装、配置virtualenv、确保开发环境的一致性、虚拟环境之virtualenvwrapper、vim

    一.centos7安装python3 1.下载python3的源码包 下载地址:https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz cd ...

  2. Java保留字和关键字

    Java的关键字:java的关键字对Java的编译器有着特殊的意义,它们表示一种数据类型或者程序的结构相关. Java的保留字:为Java预留的关键字,现在还没用到,但在新Java的版本升级中可能会用 ...

  3. Python3+Selenium3自动化测试-(五)

    这里来说一说selenium中的等待方式,其实在webdriver只有两种类型等待方式,显式等待和隐式等待,之前是在程序运行过程中使用time模块中的sleep进行代码的休眠进行强制等待,是显式等待中 ...

  4. ORACLE性能优化- Buffer cache 的调整与优化

    Buffer Cache是SGA的重要组成部分,主要用于缓存数据块,其大小也直接影响系统的性能.当Buffer Cache过小的时候,将会造成更多的 free buffer waits事件. 下面将具 ...

  5. VGA显示

    VGA控制器的编写主要是了解VGA的显示标准和时序,如1024X768@60Hz,确定时钟频率(65MHz=1344X806X60),列像素时间等于时钟周期,扫描从左到右.从上到下(类似于电视扫描PA ...

  6. Jenkins+maven+Tomcat+SVN一键自动打包部署应用到服务器

    今天请教了大神,终于把jenkins给搞明白了 现在做下笔记,防止自己老年痴呆又忘了怎么配置 (截图可能不够清晰,有不清楚的随时评论打call) 机器配置: 安装配置规划 机器 192.168.169 ...

  7. 学会这些你就是Android 开发高手了！

    世界范围内,很多移动设备都是Android系统,Android开发可以说很有前景.对于安卓开发者来说,如果有个地方可以找到Android开发所有的资料,不需要一个网站一个网站的搜索,简直是件很开心的事 ...

  8. WCF经典代码

    Array.CreateInstance(typeof(object), methodCall.Args.Length) 1. DataContractSerializer支持的类型......... ...

  9. WCF RIA SERVICE相关技术

    WCF RIA SERVICE实体属性拷贝 private void DoSubmit() { ((IEditableObject)this.RepairContract).EndEdit(); va ...

  10. arcgis中给属性文件加x y坐标

    两种方式: 一, 1在ArcGIS 9.2桌面软件arcview级别以上软件中,加载要添加x,y坐标的数据,打开属性表,添加X.Y字段 2 右键X字段,选择calculate geometry,如果颜 ...