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. java web之Filter详解

    java web之Filter详解 2012-10-20 0 个评论 作者:chenshufei2 收藏 我要投稿 .概念: Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,W ...

  2. 文件密码忘记了怎么办，教你如何使用Python破解密码

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:轻松学编程小梁 PS:如有需要Python学习资料的小伙伴可以加点击下 ...

  3. C - Dr. Evil Underscores CodeForces - 1285D 二进制

    题目大意:n个数,任意整数x对这n个数取异或值,然后使最大值最小. 思路:数据范围最大为pow(2,30);所以考虑二进制的话,最多有30位.对于某一位d,然后考虑数组v中每一个元素的d为是0还是1, ...

  4. JMeter分布式压测实战（2020年清明假期学习笔记）

    一.常用压力测试工具对比 简介:目前用的常用测试工具对比 1.loadrunner 性能稳定,压测结果及颗粒度大,可以自定义脚本进行压测,但是太过于重大,功能比较繁多. 2.Apache ab(单接口 ...

  5. 详解 普通数组 —— Arrays类 与 浅克隆

    我们在C语言中,编一些代码量规模比较大的程序,几乎都会用到 "数组" 或 "链表" ,但是,在本人之前的博文中,却对这两个知识点从未提到过,那么,本人将通过这篇 ...

  6. 数值计算方法实验之newton多项式插值 (Python 代码)

    一.实验目的 在己知f(x),x∈[a,b]的表达式,但函数值不便计算或不知f(x),x∈[a,b]而又需要给出其在[a,b]上的值时,按插值原则f(xi)=yi (i=0,1,……, n)求出简单函 ...

  7. 最通俗易懂的Redis发布订阅及代码实战

    发布订阅简介 除了使用List实现简单的消息队列功能以外,Redis还提供了发布订阅的消息机制.在这种机制下,消息发布者向指定频道(channel)发布消息,消息订阅者可以收到指定频道的消息,同一个频 ...

  8. Linux系统防火墙相关操作

    服务器重启后防火墙会自动开启,需要把防火墙关闭 以下为对防火墙进行的相关操作 查看防火墙状态 systemctl status firewalld service iptables status 暂时 ...

  9. thinkphp5 不使用form，用input+ajax异步上传图片

    不支持$this->request->file()获取图片 后台接收文件请使用$_FILE 正文开始: HTML <div class="upload"> ...

  10. Python（5）

    把 aaabbcccd 这种形式的字符串压缩成 a3b2c3d1 这种形式. print(''.join({i+str(s.count(i)) for i in s})) dic={} for i i ...