<!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. mysq查询语句包含中文以及中文乱码，字符集 GBK、GB2312、UTF8的区别

    一.查看mysql 字符集设置情况 使用Navicat for Mysql查看工具,打开命令列界面,输入show variables like '%char%';如下图,查看当前mysql字符集设置情 ...

  2. web 开发常见问题--Session 与 Cookie 却别

    总结: 1.首先,session与cookie都是保存数据的,存在的原因很大程度上是为了解决HTTP协议的无状态特性 2.都是保存数据,却别在于cookie保存在客户端,由浏览器管理,session保 ...

  3. hadoop编程：分析CSDN注冊邮箱分布情况

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jdh99/article/details/37565825 hadoop编程:分析CSDN注冊邮箱分 ...

  4. 【网络编程基础】Linux下进程通信方式（共享内存，管道，消息队列，Socket）

    在网络课程中,有讲到Socket编程,对于tcp讲解的环节,为了加深理解,自己写了Linux下进程Socket通信,在学习的过程中,又接触到了其它的几种方式.记录一下. 管道通信(匿名,有名) 管道通 ...

  5. php strtotime 函数UNIX时间戳

    int strtotime ( string time [, int now]) 本函数预期接受一个包含英文日期格式的字符串并尝试将其解析为 UNIX 时间戳. 如果 time 的格式是绝对时间则 n ...

  6. Entity FrameWork Code First 之 MVC4 数据库初始化策略用法

    通过启用迁移和更新数据库可以很容易的生成一张表.但是对数据库修改之后,通过数据迁移就没那么好实现了. 这里用到数据库生成策略,进行对数据库操作: 一.3种主要数据库生成策略 1 CreateDatab ...

  7. Spring_使用外部属性文件

    beans-properties.xml <?xml version="1.0" encoding="UTF-8"?><beans xmlns ...

  8. MapReduce数据筛选

    需求: 编写MapReduce程序算出高峰时间段(如9-10点)哪张表被访问的最频繁的表,以及这段时间访问这张表最多的用户,以及这个用户访问这张表的总时间开销. 测试数据: TableName(表名) ...

  9. Shiro缓存使用Redis、Ehcache、自带的MpCache实现的三种方式实例

    第一种:使用Redis做缓存,将数据存储到redis数据库中 第一步:在项目里面引入redis,配置文件如下: 配置文件:spring_shiro_redis.xml <?xml version ...

  10. 初入spring boot（四 ）web项目

    1. 模板引擎 spring boot提供了大量的模板引擎,包括FreeMark.Groovy.Thymeleaf.Velocity等,但spring boot中推荐用Thymeleaf,因为Thym ...