认真学习，认真记录，每天都要有进步呀！！！

加油叭！！！

一、在vue中使用样式的方式:

1. 直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定

<style>

    .red {

      color: red;

    }

    .thin {

      font-weight: 200;

    }

    .italic {

      font-style: italic;

    }

    .active {

      letter-spacing: 0.5em;

    }

  </style>


<body>

  <div id="app">

    <h1 :class="['red','thin','italic']">好饿好饿我好饿,不吃不吃我不吃</h1>

  </div>

  <script>

    var vm = new Vue({

      el: '#app',

      data: {

      },

      methods: {}

    });

  </script>

</body>

2. 使用三元表达式去决定是否添加样式

<h1 :class="[isred?'red':'','thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>

<!--    //data身上的东西在被控制的元素中可以直接就调用-->


var vm = new Vue({

  el: '#app',

  data: {

   isred:false

        },

  methods: {}

    });

用 input 的点击事件来改变样式:

<input type="button" value="变红" @click="isred=true"/>

    <h1 :class="[isred?'red':'thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>

3.在数组中使用 对象来代替三元表达式，数组中嵌套对象，提高代码的可读性

<h1 :class="[{red:true},'thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>

4.直接使用对象，传递对象作为类样式

在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以这里我没写引号, 属性的值 是一个标识符

<h1 :class="{red: true,thin: true,italic: true,active:false}">好饿好饿我好饿,不吃不吃我不吃</h1>

也可写成一个数组对象的方式

<h1 :class="classObj">好饿好饿我好饿,不吃不吃我不吃</h1>


var vm = new Vue({

  el: '#app',

  data: {

  flag: true,

  classObj: { red: true, thin: true, italic: false, active: false }

      },

  methods: {}

    });

来吧展示:

二、在vue中书写行内样式

<body>

  <div id="app">

    <!-- 对象就是无序键值对的集合 -->

    <!-- <h1 :style="styleObj1">这是一个h1</h1> -->

    <h1 :style="[ styleObj1, styleObj2 ]">呜呜呜,感冒啦,阿秋</h1>

  </div>

  <script>

    var vm = new Vue({

      el: '#app',

      data: {

        styleObj1: { color: 'pink', 'font-weight': 200 },

        styleObj2: { 'font-style': 'italic' }

      },

      methods: {}

    });

  </script>

</body>

</html>

来吧展示:

vue学习笔记（一）---- vue指令（在vue中使用样式的方式）的更多相关文章

  1. 【Vue学习笔记1】全局配置 Vue.config

    1.slient 类型:boolean: 默认:false: 用法:Vue.config.silent = true  用于取消 Vue 所有的日志与警告

  2. vue学习笔记（一）——why Vue

  3. Vue学习笔记【8】——在Vue中使用样式

    使用class样式 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 2.数组中使用三元表达式 <h1 : ...

  4. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  5. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  6. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  7. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. Vue学习笔记-vue-element-admin 前端学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  10. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

随机推荐

  1. 万字详解JVM，让你一文吃透

    摘要:本文将带大家详细地了解关于JVM的一些知识点. 本文分享自华为云社区<[JVM]关于JVM,你需要掌握这些 | 一文彻底吃透JVM系列>,作者: 冰 河 . JDK 是什么? JDK ...

  2. 检测轮廓 获取其最值的坐标 opencv-python

    一.基础知识 图像清晰度评价算法有多种 空域中,主要考察图像的邻域对比度,即相邻像素间灰度特征的 梯度差: 频域中,主要考察图像的频率分量,清晰的图像高频分量多,模糊的图像低频分量多. 灰度值 把白色 ...

  3. Go语言核心36讲20

    在上两篇文章中,我主要为你讲解了与go语句.goroutine和Go语言调度器有关的知识和技法. 内容很多,你不用急于完全消化,可以在编程实践过程中逐步理解和感悟,争取夯实它们. 现在,让我们暂时走下 ...

  4. 自学 TypeScript 第三天 使用webpack打包 TS 代码

    前言: 大家好啊,昨天介绍了 TS 编译器的配置,但在我们实际开发当中直接使用 TS 编译器去编译代码的情况会有,但没有很多,因为我们在开发大型项目的时候,一般我们都会用到打包工具,也不可能脱离打包工 ...

  5. 【经验分享】配置用户通过Console口登录设备示例

    组网需求 当用户无法进行远程登录设备时,可通过Console口进行本地登录.缺省情况下,使用Console用户界面登录设备时只需要密码认证.为了防止非法用户登录设备,修改Console用户界面的认证方 ...

  6. Day27：异常详解

    异常 1.1 异常概述 异常(Exception)指程序运行中出现的不正常情况:文件找不到.网络异常.非法参数等等. 我们通过代码来了解一下: public class Demo{ public st ...

  7. Linux系统各种库/软件版本输出指令

    日常开发基于Linux系统(其实更多的是Ubuntu平台),平时总会遇到一些情况需要查看某个库或者软件的版本信息,在这里做一下简单的记录. 1. 查看glibc版本 方法一:使用ldd指令 cv@cv ...

  8. MybatisPlus多表连接查询一对多分页查询数据

    一.序言 在日常一线开发过程中,多表连接查询不可或缺,基于MybatisPlus多表连接查询究竟该如何实现,本文将带你找到答案. 在多表连接查询中,既有查询单条记录的情况,又有列表查询,还有分页查询, ...

  9. 记一次 .NET 某电子厂OA系统 非托管内存泄露分析

    一:背景 1.讲故事 这周有个朋友找到我,说他的程序出现了内存缓慢增长,没有回头的趋势,让我帮忙看下到底怎么回事,据朋友说这个问题已经困扰他快一周了,还是没能找到最终的问题,看样子这个问题比较刁钻,不 ...

  10. 【面试题总结】Java并发-多线程、JUC详述（思维导图）

    〇.整体目录 一.多线程 1.实现方式 2.内存图 3.线程状态 4.实现线程同步 5.并发编程 二.JUC 1.概述与volatile关键字 2.ThreadLocal类 3.CAS方法 4.ato ...