vue中使用class样式

  1. 数组
<h1 :class="['red', 'thin']">这是一个H1</h1>

  1. 数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个H1</h1>

  1. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个H1</h1>

  1. 直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个H1</h1>

使用内联样式

  1. 直接在元素上通过 :style 的形式，书写样式对象

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

  1. 将样式对象，定义到 data 中，并直接引用到 :style 中

  • 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

  • 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

  1. 在 :style 中通过数组，引用多个 data 上的样式对象

  • 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

  • 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

        <style>

            .red {

                color: red;

            }

            .thin {

                font-weight: 200;

            }

            .italic {

                font-style: italic;

            }

            .active {

                letter-spacing: 0.5em;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <!-- <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

            <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 简写 ：  -->

            <!-- <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

            <!-- 在数组中使用三元表达式 -->

            <!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

            <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->

            <!-- <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

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

            <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>

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

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

            <!-- 添加多个对象，可以放到数组中 -->

            <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>

        </div>

        <script>

            // 创建 Vue 实例，得到 ViewModel

            var vm = new Vue({

                el: '#app',

                data: {

                    flag: true,

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

                    styleObj1:{ color:"red"，"font-size":"28px"},

                    styleObj1:{ 'font-weight': 200},//属性有横线的要加双引号

                },

                methods: {}

            });

        </script>
 

学习vue第五节，vue中使用class和style的css样式的更多相关文章

  1. 学习HTML 第五节.简单交互 加个按钮

    学习HTML 第五节.简单交互 也许你和我一样,对页面排版的兴趣小于网页交互,那么我们就先略过一些章节,直接先学一下简单交互. 前面点击图片打开链接的网址,已经是最简单的交互方式了,复杂的方式则需要用 ...

  2. 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录

    风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...

  3. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  4. jQuery学习笔记（五）jQuery中的表单

    目录 单行文本框的应用 表单验证 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以 ...

  5. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  6. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  7. php部分：网页中报表的打印，并用CSS样式控制打印的部分；

    网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...

  8. Vue快速学习_第五节

    axios安装及使用 网站文档地址:https://www.kancloud.cn/yunye/axios/234845 1.npm安装 cnpm install axios 2.// 在main.j ...

  9. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...

随机推荐

  1. conda命令详解

    显示已有环境信息 conda info --envs 创建环境 conda create --name [环境名] python=[版本号] 删除环境 conda remove --name [环境名 ...

  2. Spring温习(1)--最基础的示例

    Spring温习(1)--最基础的示例 博客分类: 框架-Spring专栏 SpringXMLBeanWebDAO 从现在开始,我将从Spring为起点,逐步复习几大框架各方面的知识,以便今后查看使用 ...

  3. Java成长第四集--文本处理IO流

    Java IO流在实际业务中使用的频率还是蛮高的,一些业务场景比如,文件的上传和导出,文件的读取等基本都是通过操作IO流来实现的,所以IO流是我们现在学习过程中必须要掌握的技能之一,熟练的使用IO流, ...

  4. JAVA—SQL注入

    之前看到的一道java面试题,Statement与PreparedStatement的区别,什么是SQL注入,如何防止SQL注入 前面部分比较好回答 1.PreparedStatement支持动态设置 ...

  5. 如何用python批量生成真实的手机号码

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:Python测试社区 1目 标 场 景 平时在工作过程中,偶尔会需要大 ...

  6. L0 torch 构建网络初步

    L0 pytorch 构建简单网络 本文是L0, 目的是把pytorch构建感知器的程序,仔细剖析理解. import torch from torch import nn torch.__versi ...

  7. stand up meeting 1/15/2016 && work of weekend 1/16/2016~1/17/2016

    part 组员                工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云  组内对生词卡片又重新进行了讨论:准备最后的发布和整个开发的整理 ...

  8. 1196F - K-th Path

    题目链接: http://codeforces.com/problemset/problem/1196/F 题目大意::无向图,求任意两点第k短的路径 思路:按照边的大小,只保留前K个边,如果不连同的 ...

  9. 13.create-react-app 构建的项目使用代理 proxy

    1. 正常运行 npm run eject 2. create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置, 配置成如下: "p ...

  10. Java多台中成员访问特点

    多态中的成员访问特点: A:成员变量 编译看左边,运行看左边 B:构造方法 创建子类对象的时候,访问父类的构造方法,对父类的数据进行初始化 C:成员方法 编译看左边,运行看右边.//因为调用对象时,子 ...