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

加油叭！！！

一、在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. JS学习笔记 (四) 数组进阶

    1.基本知识 1.数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中的位置称为索引,以数字表示,以0开始. 2.数组是无类型的.数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的 ...

  2. Docker基础和常用命令

    Docker基础和常用命令 一,Docker 简介 1.1,什么是 Docker Docker 使用 Google 公司推出的 Go 语言 进行开发实现,基于 Linux 内核的 cgroup,nam ...

  3. Spring三级缓存解决循环依赖

    前提知识 1.解决循环依赖的核心依据:实例化和初始化步骤是分开执行的 2.实现方式:三级缓存 3.lambda表达式的延迟执行特性 spring源码执行逻辑 核心方法refresh(), popula ...

  4. 一、Redis的Java客户端

    模糊的目标,要不断去解释它们,把他们转化成一个更具体的内容,这样才能够找到途径. 常用客户端介绍 Jedis客户端 基本使用(直连) 引入对应依赖 <dependency> <gro ...

  5. C#微信公众号关注二维码生成、密文方式

    文章说明:是公众号使用自己服务器的处理的其中一篇关注二维码信息处理 1.流程 1.1 需知  全局返回码:这个必须要哦.不然调试的时候接口出的错误怎么处理呢. (闲话:博客的随笔只能添加也给超链呀,‍ ...

  6. 关于tomcat8在windows2008下高并发下有关问题的解决方案

    关于tomcat8在windows2008下高并发下问题的解决方案 因为客户服务器特殊的环境问题,只能使用windows2008r2服务器,然而配置过后,网站的高访问量很快就出现了各种问题,以下是解决 ...

  7. jmeter Foreach 控制器与json提取器/正则表达式

    适用场景:对某些业务数据依次操作 如:删除某个用户下的所有人员数据,无批量删除接口时,只能循环调用删除人员接口,直到删除完成 返回数据格式: 1.  使用json提取器或正则表达式提取业务数据(jso ...

  8. AcWing786.第k个数

    题目描述 给定一个长度为 \(n\) 的整数数列,以及一个整数 \(k\),请用快速选择算法求出数列从小到大排序后的第 \(k\) 个数. 输入格式 第一行包含两个整数 \(n\) 和 \(k\). ...

  9. GitHub - 电脑经常无法访问GitHub页面

    来自这里 1.打开Dns检测|Dns查询 - 站长工具2.在检测输入栏中输入http://github.com官网3.把检测列表里的TTL值最小的IP输入到host里,并对应写上github官网域名. ...

  10. 论文解读（CAN）《Contrastive Adaptation Network for Unsupervised Domain Adaptation》

    论文信息 论文标题:Contrastive Adaptation Network for Unsupervised Domain Adaptation论文作者:Guoliang Kang, Lu Ji ...