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. python3（二十九） orderClass

    """ """ __author__ = 'shaozhiqi' # Python的class中还有许多有特殊用途的函数,可以帮助我们定制类 ...

  2. 【翻译】Java Array的排名前十方法(Top 10 Methods for Java Arrays)

    这里列举了Java Array 的前十的方法.他们在stackoverflow最大投票的问题. The following are top 10 methods for Java Array. The ...

  3. JAVA的synchronized写法

    使用关键字synchronized的写法比较多,常用的有如下几种,代码如下: public class MyService { synchronized public static void test ...

  4. Oracle数据库提权

    一.执行java代码 简介 oracle提权漏洞集中存在于PL/SQL编写的函数.存储过程.包.触发器中.oracle存在提权漏洞的一个重要原因是PL/SQL定义的两种调用权限导致(定义者权限和调用者 ...

  5. python 工具链 虚拟环境和包管理工具 pipenv

    Pipenv is a tool that aims to bring the best of all packaging worlds (bundler, composer, npm, cargo, ...

  6. 微信网页授权报code been used, hints: [ req_id: XYv1Ha07042046 ]

    先贴上代码: public function index() { $code = input('get.code'); $tool = new Wxtool(); if (empty($code)) ...

  7. php用户量剧增导致cpu100%解决办法

    在php扩展里边开启opcache扩展,此扩展是解析php的缓存机制,每次解析都要消耗cpu,所以有大量的fpm进程去占用cpu,开启此扩展之后cpu就瞬间下来了,只解析第一次,往后的都使用缓存.很好 ...

  8. 获取 保存 系统信息 [Windows]

    出处:https://www.technig.com/find-windows-10-system-information/ 在“运行”里,运行 msinfo32. System Informatio ...

  9. Handler 机制（一）—— Handler的实现流程

    由于Android采用的是单线程模式,开发者无法在子线程中更新 UI,所以系统给我提供了 Handler 这个类来实现 UI 更新问题.本贴主要说明 Handler 的工作流程. 1. Handler ...

  10. java 之 jsp tomcat启动失败问题

    问题描述: 创建了一个helloServlet 代码如下 package Test; import java.io.IOException; import javax.servlet.ServletE ...