<!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. 采集baidu搜索信息的java源代码实现（大部分转发，少量自己修改）（使用了htmlunit和Jsoup）(转发：https://blog.csdn.net/zhaohang_1/article/details/44731039)

    1.maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  2. 同步锁，死锁现象与递归锁，信息量Semaphore.....（Day36）

    一.同步锁 三个需要注意的点: #1.线程抢的是GIL锁,GIL锁相当于执行权限,拿到执行权限后才能拿到互斥锁Lock,其他线程也可以抢到GIL,但如果发现Lock仍然没有被释放则阻塞,即便是拿到执行 ...

  3. delphi webbrowser 获取iframe

    procedure TForm1.Button4Click(Sender: TObject);var Index: Integer; Document: IHTMLDocument2; FrameId ...

  4. 数据结构&算法（二）_算法基础之前传（递归、时间复杂度、空间复杂度、二分查找）

    什么是算法: 间而言之算法(Algorithm):一个计算过程,解决问题的方法 递归的两个特点: 调用自身 结束条件 递归示例: def func(x): : print("我的小鲤鱼&qu ...

  5. struts2基础——需要注意的几点

    struts是流行和成熟的基于MVC设计模式的web应用程序框架,使用struts可以帮助我们减少运用MVC设计模型来开发web应用的时间. 目录: 一.struts2的工作原理及文件结构 二.三种访 ...

  6. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  7. hadoop2.7.x运行wordcount程序卡住在INFO mapreduce.Job: Running job:job _1469603958907_0002

    一.抛出问题 Hadoop集群(全分布式)配置好后,运行wordcount程序测试,发现每次运行都会卡住在Running job处,然后程序就呈现出卡死的状态. wordcount运行命令:[hado ...

  8. 存在单点故障的namenode宕机恢复测试

    前提:如果namenode没有做HA,那么至少应该启用secondarynamenode,以便namenode宕机之后手动恢复数据 实验环境:3个节点(cenos 6.10) 测试前数据: 1.为了确 ...

  9. 【JavaScript】用JS绘制一个球

    参考: 1.http://www.w3school.com.cn/html5/html_5_canvas.asp 2.http://blog.csdn.net/qq_27626333/article/ ...

  10. 微软名人数据集 ms_celeb_1m 处理（MsCelebV1-Faces-Aligned.tsv）python脚本

    本文主要介绍了如何对MsCelebV1-Faces-Aligned.tsv文件进行提取 原创by南山南北秋悲 欢迎引用!请注明原地址 http://www.cnblogs.com/hwd9654/p/ ...