<!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. 记Booking.com iOS开发岗位线上笔试

    今晚参加了Booking的iOS职位线上笔试,结束后方能简单归纳一下. 关于测试内容: Booking采用了HackerRank作为测试平台,测试总时长为75分钟,总计4道题. 测试之前我很紧张,因为 ...

  2. 【2019北京集训测试赛（十三）】数据(sj) 冷静分析

    题目大意:给你一个代表区间$[1,n]$的线段树,问你随机访问区间$[1,n]$中的一个子区间,覆盖到的线段树节点个数的期望(需要乘上$\frac{n(n-1)}{2}$后输出). 数据范围:$n≤1 ...

  3. eclipse引入php源包

    首先安装这些yum install gcc gcc-c++ kernel-devel autoconf automake libtool bison re2c gdb 导入时,如果有这个报错的话 Pr ...

  4. 基于python+appium+yaml安卓UI自动化测试分享

    结构介绍 之前分享过一篇安卓UI测试,但是没有实现数据与代码分离,后期维护成本较高,所以最近抽空优化了一下.不想看文章得可以直接去Github,欢迎拍砖大致结构如下:   结构.png testyam ...

  5. resin4.0.25 安装配置 及结合eclipse开发

    resin4.0.25 安装配置 及结合eclipse开发 本文大部分内容是对官网的翻译,及自己配置后的一些体会. 一.  基于win  ,resin基本安装1,安装jdk1.6或更高版本2,配置环境 ...

  6. top命令查看进程下线程信息以及jstack的使用

    转自:https://www.cnblogs.com/shengulong/p/8513652.html top -Hp pid可以查看某个进程的线程信息 -H 显示线程信息,-p指定pid jsta ...

  7. linux下xdebug的安装和配置方法

    xdebug简介 Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. xdebug安装 首先让php错误显示,只需要修改php.in ...

  8. phpStorm使用技巧总结

    工欲善其事,必先利其器. 拥有一个好的工具不仅可以事半功倍,而且也令人神清气爽. 在编辑器上,我所走过的路是这样的:notepad(对,就是最原始的WIN下的note) -> editplus ...

  9. Python机器学习笔记：深入学习Keras中Sequential模型及方法

    Sequential 序贯模型 序贯模型是函数式模型的简略版,为最简单的线性.从头到尾的结构顺序,不分叉,是多个网络层的线性堆叠. Keras实现了很多层,包括core核心层,Convolution卷 ...

  10. Angular2入门：TypeScript的类型 - 类型、null、undefined