<!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. MySQL数据库（1）- 数据库概述、MySQL的安装与配置、初始SQL语句、MySQL创建用户和授权

    一.数据库概述 1.什么是数据(Data) 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机. 在计 ...

  2. Python高级教程-列表生成式

    List Comprehensions(列表生成式) 列表生成式,是Python内置的非常简单却强大的可以用来创建list的生成式. 例如,要生成list:[1,2,3,4,5,6,7,8,9,10] ...

  3. String StringBuffer StringBuilder 老生常谈

    1.String 与 StringBuffer . StringBuilder的区别 String 字符串常量 而 (StringBuffer 和 StringBuilder 字符串变量) 执行速度上 ...

  4. Android Studio 启动时不自动打开项目

    主界面中,选择单击菜单栏 File ,单击 Settings 选择 Appearance & Behavior 选项.选择System Settings选项.取消勾选Reopen last p ...

  5. jquery关于select框的取值和赋值

    jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其中一项时触发      var checkValue ...

  6. 关闭SourceInsight的大括号自动缩进

    使用Source Insight可以很好的管理项目代码,也非常便于阅读.但是,在使用Source Insight书写C语言代码时,会发现这样的问题,键入大括号之后,它会自动缩进一个制表符,这种处理跟我 ...

  7. PScc

      photoshop cc 2018破解版是Adobe公司最新版专业化CC图像处理软件,新功能超乎你的想象!photoshop cc 2018破解版新功能给力来袭,访问Lightroom照片,分享作 ...

  8. Java并发之——线程池

    一. 线程池介绍 1.1 简介 线程池是一种多线程处理形式,处理过程中将任务添加到队列,然后在创建线程后自动启动这些任务.线程池的基本思想还是一种对象池的思想,开辟一块内存空间,里面存放了众多(未死亡 ...

  9. LeetCode：棒球比赛【682】

    LeetCode:棒球比赛[682] 题目描述 你现在是棒球比赛记录员.给定一个字符串列表,每个字符串可以是以下四种类型之一:1.整数(一轮的得分):直接表示您在本轮中获得的积分数.2. " ...

  10. python之路 IO多路复用 线程进程初步了解

    一.IO多路复用 1.客户端 #!/usr/bin/env python #-*-coding:utf-8-*- import socket sk=socket.socket() sk.connect ...