<!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. x265探索与研究（六）：main()函数

    x265探索与研究(六):main()函数 x265源代码的入口函数是main(),本文分析main()的主要功能. 首先给出main()函数的功能及其代码结构:其次给出main()函数源代码以及分析 ...

  2. SSDT表概念具体解释

    SSDT 的全称是 System Services Descriptor Table,系统服务描写叙述符表. 这个表就是一个把 Ring3 的 Win32 API 和 Ring0 的内核 API 联系 ...

  3. Java io流详解三

    public class IOpractise { public void iotest() { int b= 0; FileInputStream fis = null; try { fis = n ...

  4. python s12

    logging模块 很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式 ...

  5. day3-python的函数及参数

    函数式编程最重要的是增强代码的重用性和可读性 1 2 3 4 def 函数名(参数):     ...     函数体     ... 函数的定义主要有如下要点: def:表示函数的关键字 函数名:函 ...

  6. 查看虚拟机操作系统、cpu核数、内存命令

    1.查看操作系统 在终端中执行下列指令:cat/etc/issue可以查看当前正在运行的 Ubuntu 的版本号.其输出结果类似下面的内容:Ubuntu 10.04 LTS \n \l方法二:使用 l ...

  7. Java并发（6）：concurrent包中的Copy-On-Write容器

    一. concurrent包介绍 在JDK1.5之前,Java中要进行业务并发时,通常需要有程序员独立完成代码实现,而当针对高质量Java多线程并发程序设计时,为防止死蹦等现象的出现,比如使用java ...

  8. CodeMatic动软自动生成Nhibernate

    前两天调查了下自动生成工具MyGeneration和codesmith前一个版本已经不更新了后面一个太高级生成 的代码包含了太多东西,没整明白.不过生成的xmlmapping很强大.所以干脆整合一下c ...

  9. 2018 Multi-University Training Contest 1 - D Distinct Values (STL+双指针)

    题意:数量为N的序列,给定M个区间,要求对每个区间Li,Ri,都有al..r (l≤i<j≤r), ai≠aj.构造这个序列使其字典序最小. 分析:如果对于每个所给区间都暴力扫一遍,1e5的数据 ...

  10. SqlHelper简单实现（通过Expression和反射）2.特性和实体设计

    对于需求中的不要暴露DataTable或DataSet,我想到了设计中常用的对象:实体(Entity),通过实体将数据库中的字段封装成类,这样做不仅使代码更有可读性,维护起来也很方便.同时我自定义了一 ...