<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>vue自定义样式</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <style>

        .classA {

            font-size: 16px;

            color: red;

        }

        .classB {

            font-size: 16px;

            color: green

        }

        .classC {

            font-size: 16px;

            color: blue;

        }

    </style>

</head>

<body>

    <div id="example">

<!--对象：无效例子

        <div v-bind:class=" {A}">

            1.对象:不可再设置对象

        </div>

        <div v-bind:class=" {classA : true}">

            2.对象：设置样式名称后，也不可直接设置true

        </div>

        <div v-bind:class=" {classA}">

            3.对象: 设置样式名称后，不设置也不会显示

        </div>

 -->

         <div v-bind:class=" {classA : isShow}">

            1.对象：样式名称(classA)+是否显示的对象(缺一不可)

         </div>

<!--数组无效

        <div :class="[classB]">

            1.数组:不可直接设置样式名称

        </div>

        <div :class="[{C:true}]">

            2.数组：设置样式的对象后，也不可以直接设置true

        </div>

-->

        <div :class="[B]">

            2.1.数组：直接对象赋值样式的名字(classB)

        </div>

        <div :class="[{classC: isShow}]">

            2.2.数组：包含一个对象(对象的用法)

        </div>

<!--三元运算：内联样式的设置:可以直接设置true-->

    <div  :style="{'color':isShow? '#000':'#fff'}">

        3.style内联：JSX写法

    </div>

    <div :class="true?A:null">

        4.class内联：单纯对象判断

    </div>

    </div>

</body>

<script>

    var examleVM2 = new Vue({

        el: '#example',

        data: {

            A: 'classA',

            B: 'classB',

            C: 'classC',

            isShow: true,

            isHidden: false,

        }

    })

</script>

</html>

vue权威指南笔记01——样式的设置的更多相关文章

  1. vue权威指南笔记02——对比v-if与v-show

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Struts2权威指南笔记

    Struts2权威指南笔记 1.mvc特点包括: ① 多个视图可以对应一个模型 ② 模型返回的数据与显示逻辑分离 ③ 应用层被分隔为三层,降低了各层之间的耦合,提供了应用的可扩展性 ④ 控制层的概念也 ...

  3. 【vue 权威指南】 学习笔记 二

    1.指令 1.1内部指令 基础指令:v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-b ...

  4. 【vue 权威指南】 学习笔记 一

    内容简介 vue.js 是一个用来开发Web界面的前端库. 1.vue.js 是什么 vue.js 是一个构建数据驱动的web界面的库,vue.js 通过简单的API提供高效的数据绑定和灵活的组件系统 ...

  5. css 权威指南笔记（ 五）结构和层叠之三种样式来源

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...

  6. javascript权威指南笔记

    最近每天工作之余看下js的细节部分,时间不是很多,所以看的进度也不会太快,写个博客监督自己每天都看下. 以前不知道的细节或者以前知道但是没注意过的地方都会记录下来,所以适合有一定基础的,不适合零基础新 ...

  7. css权威指南--笔记

    第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...

  8. css 权威指南笔记（四）选择器

    规则结构 每个规则都有两个基本部分组成:选择器和声明块.声明块由一个或多个声明组成,每个声明则是一个属性-值对. 元素选择器 声明和关键字 关键字一般由空格隔开:有一种情况例外 font属性中的  斜 ...

  9. 1.语言概述-JavaScript权威指南笔记

    上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...

随机推荐

  1. 【2019北京集训3】逻辑 树剖+2-sat

    题目大意:有一颗有$m$个叶子节点的二叉树. 对于叶子节点$i$,$x[i]=(a[i]\ xor\ V_{p[i]})or(b[i]\ xor\ V_{q[i]})$ 对于非叶子节点$i$,$x[i ...

  2. Ubuntu18.04 安装 VMwareTools

    VMwareTools作用: 1.增强虚拟显卡和硬盘性能.以及同步虚拟机与主机时钟的驱动程序. 2.可以从物理主机直接往虚拟机里面拖文件. 3.鼠标进入虚拟机后可以直接出来,无需按CTRL+ALT才可 ...

  3. setInterval()、clearInterval()、setTimeout()和clearTimeout() js计数器方法（还有第三个参数）

    用法是会用,但是之前一直以为接函数的 var a = setInterval(function(){},1000) 比如a是函数名,最近才发现它是一个ID, var intervalID = wind ...

  4. redis 乐观锁实践秒杀

    需求:有一个标(理解成抢红包也行,accountBalance预赋值1000元),大家可以抢购,每个用户抢购成功后,更新最后标的总数,在并发情况下,使用redis的乐观锁,保证更新标总值正确性,先往r ...

  5. Fork/Join框架

    java 5开始引入了Executor和ExecutorService接口以及实现这两个接口的类之后,使得java在并发支持上得到了进一步的提升.执行器框架(Executor Framework)将任 ...

  6. centos下如何使用sendmail发送邮件

    最近在实施服务端日志监控脚本,需要对异常情况发送邮件通知相关责任人,记录下centos通过sendmail发送邮件的配置过程. 一.安装sendmail与mail 1.安装sendmail:  1) ...

  7. Python 解析har 文件将域名分类导出

    前言 作为程序员平时主要是使用 shadowsocks 作为代理工具的.shadowsocks 有个很明显的优点儿就是可以设置白名单和黑名单.白名单是会走shadowsocks的自动代理模式. 遇到的 ...

  8. 插入排序——Insertion Sort

    基本思想: 在要排序的一组数中,假定前n-1个数已经排好序,现在将第n个数插到前面的有序数列中,使得这n个数也是排好顺序的.如此反复循环,直到全部排好顺序. 过程: 平均时间复杂度:O(n2) jav ...

  9. C51 玄学问题，magic

    0x00 问题代码 void int0_isr(void) interrupt 0 { num++; if (num%2 == 1) { uint k; for(k=0;k<3;k++) { P ...

  10. Eureka编程

    在一些场景下,我们需要监听eureka服务中心的一些状态,譬如某个微服务挂掉了,我们希望能监听到,并给管理员发送邮件通知或钉钉告警. 一.Eureka的监听事件,可以用来监控.告警EurekaInst ...