<!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. iOS开发总结——项目目录结构

    1.前言 清晰的项目目录结构有利于项目的开发,同时也是软件架构的一部分,所以,项目开发之初搭建项目的目录结构很重要.刚转iOS时,自己并不知道如何搭建App的项目目录,在参与开发两个应用后,结合Web ...

  2. python lxml库生成xml文件-节点命名空间问题

    lxml库,处理xml很强大,官方文档:https://lxml.de/tutorial.html#namespaces 例如: 我们要生成如下格式的报文: <ttt:jesson xmlns: ...

  3. 如何将页面上的数据导入excel中

    网上关于页面数据导入excel的文章很多,但是大部分都是关于 ActiveXObject 对象,可是ActiveXObject 对象是只支持IE的,可我连IE11也测试了,还是无法识别,又查到消息,好 ...

  4. 关于iscroll插件的使用

    本次项目有一个需要多信息展示,需要左右滑动的效果,查资料了解到iscroll,就拿来用,如下调用: var myscroll = new IScroll("#wrapper", { ...

  5. spring cloud+.net core搭建微服务架构：Api授权认证（六）

    前言 这篇文章拖太久了,因为最近实在太忙了,加上这篇文章也非常长,所以花了不少时间,给大家说句抱歉.好,进入正题.目前的项目基本都是前后端分离了,前端分Web,Ios,Android...,后端也基本 ...

  6. PyCharm的基本快捷键和配置简介

    快捷键 1.编辑(Editing)Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctr ...

  7. Android中Enum（枚举）的使用

    简介 enum 的全称为 enumeration, 是 JDK 1.5  中引入的新特性,存放在 java.lang 包中. 创建枚举类型要使用 enum 关键字,隐含了所创建的类型都是 java.l ...

  8. Centos7安装Mysql8（官方整合包）

    1. 下载整合包 [root@master ~]# wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.12-1.el7.x86_ ...

  9. WC2017游记 & 能力残废康复计划

    懒癌晚期的蒟蒻一年多没有更Blog了… 这次冬眠营去绍一省好好地游玩了一番,体验了一段时间的豪华自助餐,成功吃胖… 第一课堂的东西基本还是没吸收…听着觉得有点道理,结果过几分钟就忘了…可能最大的收获就 ...

  10. Animate.css(一款有意思的CSS3动画库)

    官网:https://daneden.github.io/animate.css/ animate.css 是一款跨浏览器的动画库. 使用方式: 在页面的 <head>中引入样式文件: & ...