<!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. Tools - 一些代码阅读的方法

    1 初始能力 让阅读思路清晰连贯,保持在程序的流程架构和逻辑实现上,不被语法.编程技巧和业务流程等频繁地阻碍和打断. 语言基础:熟悉基础语法,常用的函数.库.编程技巧等: 了解设计模式.构建工具.代码 ...

  2. .NET手记－Autofac入门Getting Started

    内容主要翻译自官方文档,原文请看:http://autofac.readthedocs.org/en/latest/getting-started/index.html#application-sta ...

  3. ［转载］Apple Watch 开发详解

    Apple Watch 开发详解 Apple Watch现在对于第三方开发者来说更多的还是一块额外的屏幕.暂时WatchKit没有能给出足够的接口.现在Watch App的主要运算逻辑需要依赖iPho ...

  4. Liferay7 BPM门户开发之4: Activiti事件处理和监听Event handlers

    事件机制从Activiti 5.15开始引入,这非常棒,他可以让你实现委托. 可以通过配置添加事件监听器,也可以通过Runtime API加入注册事件. 所有的事件参数子类型都来自org.activi ...

  5. Java中IO流中的装饰设计模式(BufferReader的原理)

    本文粗略的介绍下JavaIO的整体框架,重在解释BufferReader/BufferWriter的演变过程和原理(对应的设计模式) 一.JavaIO的简介 流按操作数据分为两种:字节流与字符流. 流 ...

  6. 使用Charles抓取APP之HTTPS请求

    Charles是一款非常好用的抓包工具,通常使用它来进行APP开发抓包调试,尤其是HTTPS请求. 一.安装Charles 去官网(https://www.charlesproxy.com/)下载软件 ...

  7. Python学习的路上，Anaconda送你一双遮天神翼

    一.背景 ​ 最近在学习python,发现在本地搭建python环境的时候,要是想要同时搭建不同python版本的环境,就比较麻烦,很容易就出现冲突了,很是头疼.然后光明就出现这山重水复疑无路的时候, ...

  8. Ext.Direct最新版源码下载地址

    以前的地址用不了,现在地址更新为: 全平台: http://www.sencha.com/forum/showthread.php?67992-Ext.Direct-Server-side-Stack ...

  9. spring-boot-2.0.3源码篇 - filter的注册，值得一看

    前言 开心一刻 过年女婿来岳父家走亲戚,当时小舅子主就问:姐夫,你什么时候能给我姐幸福,让我姐好好享受生活的美好.你们这辈子不准备买一套大点的房子吗?姐夫说:现在没钱啊!不过我有一个美丽可爱的女儿,等 ...

  10. PHP 网页数据api采集

    一个简单的数据采集,这里用的方法是API数据采集 //api地址,读取文本 $result = file_get_contents("https://feed.mix.sina.com.cn ...