<!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. maven个人总结

    一.解压maven(apache-maven-3.6.0-bin.zip) ---apache-maven-3.6.0 ---bin(Binary书写) >存放二进制可执行的文件(命令),例如m ...

  2. python之进程（multiprocess）

    有人说测试学习多进程(或多线程)有啥用?额告诉你很有用,特别是在自己写性能测试工具时就可以用到,而且非常方便 这里只介绍非常简单的多进程模块(multiprocessing.Process) 代码如下 ...

  3. 【转】浮点数与IEEE 754

    http://www.cnblogs.com/kingwolfofsky/archive/2011/07/21/2112299.html 浮点数 1.   什么是浮点数 在计算机系统的发展过程中,曾经 ...

  4. [每天解决一问题系列 - 0013] 如何修改WiX Burn内置的窗口

    问题描述: 我们产品的burn安装包仅支持.net 3.5 sp1以上,在只有.net 2.0的机器上会给用户弹一个窗口,告诉用户为什么不能够安装的原因.本来burn已经内置了,但是在日文操作系统下, ...

  5. python 多环境共存 基础

    正在学习python 使用的是3.3 但是由于种种原因吧 还得使用python2.7 所以记录一下 如何安装2个版本 假设 在windows 下面安装的python 版本 和路径 如下 python ...

  6. salesforce lightning零基础学习(六)Lightning Data Service(LDS)

    本篇可参看:https://trailhead.salesforce.com/modules/lightning_data_service Lightning中针对object的detail页面,一个 ...

  7. vector、deque、stack、queue、list以及set的使用

    注意:以下测试案例都要加上相应的头文件,必要时要加上algorithm文件. 1.vector 连续存储结构,每个元素在内存上是连续的:支持高效的随机访问和在尾端插入/删除操作,但其他位置的插入/删除 ...

  8. find 命令参数大全

    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数 ...

  9. 怎样删除C/C++代码中的所有注释？浅谈状态机的编程思想

    K&R习题1-23中,要求“编写一个程序,删除C语言程序中所有的注释语句.要正确处理带引号的字符串与字符常量.在C语言中,注释不允许嵌套”. 如果不考虑字符常量和字符串常量,问题确实很简单.只 ...

  10. CentOS6.5安装mysql以及常见问题的解决

    前言 最近在学习Linux系统,今天在安装MySQL数据库时出现很多问题,花费了两个小时终于解决,故记录下来以供大家参考.(本人目前还在学习阶段,下面写到的是自己结合网上查到的资料以及各位前辈给出的解 ...