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. Github上面拉取别人提交的PR

    在github上面协同开发,避免不了拉取别的同学的PR,那么如何拉取呢? 1.首先我们看下upstream liz@liz-PC:~/jimeng/handle-api$ git remote -v ...

  2. leetcode c++做题思路和题解（2）——链表的例题和总结

    链表的例题和总结 0. 目录 环形链表 1. 环形链表 题目: https://leetcode-cn.com/problems/linked-list-cycle/ 看了别人的思路真是感概万千,思路 ...

  3. alg-最长回文字符串

    class Solution { public: std::string longestPalindrome(const std::string& s) { if (s.empty()) { ...

  4. AJ学IOS（13）UI之UITableView学习（下）汽车名牌带右侧索引

    AJ分享,必须精品 先看效果图 代码 ViewController #import "NYViewController.h" #import "NYCarGroup.h& ...

  5. 复杂Excel转换与导入

    需求 把不同客户提供Excel 直接导入到系统中生成对应的收货单或是出货单.后端创建收货端和出货单的接口已经有现成的webservice或是标准的xml:这类需要做的就是把客户提供不同种类的Excel ...

  6. linux基础知识点扫描

    1.tty:查看自己的虚拟终端 2.echo "你的服务器已经被我控制,请立刻打钱给我,账号12312312312314123421,否则后果自负!!!"  >  /dev/ ...

  7. Android应用架构分析

    一.res目录: 1.属性:Android必需: 2.作用:存放Android项目的各种资源文件.这些资源会自动生成R.java. 2.1.layout:存放界面布局文件. 2.2.strings.x ...

  8. 上班无聊，自己用python做个小游戏来打发时间

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

  9. .Net Core主机配置

    Host:(主机)负责web应用程序的启用和生成期管理,配置服务器和请求处理管道. 主机配置日志,依赖注入关系,实际上是一个封装了应用资源的对象. 创建主机生成器-〉配置主机-〉创建主机-〉运行主机. ...

  10. tensorflow1.0 dropout层

    """ Please note, this code is only for python 3+. If you are using python 2+, please ...