• <!-- 传统写法 -->
<h1 class="red thin">这是一个h1标签</h1>
  • <!-- 第一种使用方式，直接传递一个数组 -->
<h1 :class="['red', 'italic']">这是第二个h1标签</h1>
  • <!-- 在这里可以使用三元表达式 -->
<h1 :class="['red', 'italic', flag?'active':'']">这是第三个h1标签</h1>
 
  • <!-- 简化写法 在数组中使用对象来代替三元表达式 -->
<h1 :class="['red','italic',{'active':flag}]">这是第四个h1标签</h1>
 
  • <!-- 直接使用对象 -->
<h1 :class="{red:true, italic:false, thin:true, active:flag}">来来来，大战一场</h1>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- 引入 vue.js -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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>

        <!-- 第一种使用方式，直接传递一个数组 -->

        <h1 :class="['red', 'italic']">这是第二个h1标签</h1>

        <!-- 在这里可以使用三元表达式 -->

        <h1 :class="['red', 'italic', flag?'active':'']">这是第三个h1标签</h1>

        <!-- 简化写法 在数组中使用对象来代替三元表达式 -->

        <h1 :class="['red','italic',{'active':flag}]">这是第四个h1标签</h1>

        <!-- 直接使用对象 -->

        <h1 :class="{red:true, italic:false, thin:true, active:flag}">来来来，大战一场</h1>

    </div>

    <div id="article">

        <p class="green thin">我的段落1</p>

        <p :class="{red:true, active: pres}">我的段落2</p>

    </div>

</body>

<script>

    // 实例化vue对象

    let vm1 = new Vue({

        // 绑定对象

        el: '#app',

        data: {

            flag: true

        },

        methods: {

        }

    })

    let vm2 = new Vue({

        el: '#article',

        data: {

            pres: false

        }

    })

</script>

</html>

Vue.js04：vue样式-通过属性绑定方式为元素设置class类样式的更多相关文章

  1. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  2. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  3. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 动态修改 dom 元素的伪类样式

    最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...

  5. Vue中img标签src属性绑定

    最近刚刚完成了自己的毕业设计项目,整理一下过程中遇到的问题吧~~~ 我做的是一个基于Vue的信息资讯展示与管理平台,显示首页.详情页等的文章内容时就涉及到了图片展示,项目初始时我搭建的是静态网页结构, ...

  6. Vue 温故而知新 props如何双向属性绑定

    传送门:https://cn.vuejs.org/v2/guide/components-custom-events.html https://segmentfault.com/q/101000001 ...

  7. Vue中img的src属性绑定

    正确:<img :src=" 'files/'+value.src "> 或 <img :src="value.src">错误:< ...

  8. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  9. vue动态绑定类样式ClassName知多少

    对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...

随机推荐

  1. ArcGIS 网络分析[0] 介绍与博文目录【更新中】

    网络分析是个热点,理论上是属于计算机图形学和数据结构的,GIS以此为基础做出应用. 以下列举本人在学习中遇到的网络分析问题与经验总结. 1. 软件平台及数据准备 平台:Windows 10 操作系统, ...

  2. oracle无法插入数据

    最近遇到一个问题,本来插入数据好好的,突然都不能插入了. 报错------------------->ora-01653:表无法通过128(在表空间)扩展 原因是表满了!!! 解决方案: 1. ...

  3. 性能测试工具 wrk 使用教程

    文章首发自个人微信公众号:小哈学Java 个人网站地址:https://www.exception.site/wrk 被面试官经常问到之前开发的系统接口 QPS 能达到多少,经常给不出一个数值,支支吾 ...

  4. python接口自动化（十）--post请求四种传送正文方式（详解）

    简介 post请求我在python接口自动化(八)--发送post请求的接口(详解)已经讲过一部分了,主要是发送一些较长的数据,还有就是数据比较安全等.我们要知道post请求四种传送正文方式首先需要先 ...

  5. 关闭 Mac 拼写自动纠正与横线转换

    如果你是个程序员, 如果你恰好用 mac 自带的 notes 来做笔记, 很大可能性, 你会在里面贴代码, 但是, Mac 的拼写检查和自动纠正功能,会把代码变成你不想要的样子, 比如, 它会为你首字 ...

  6. Promise来控制JavaScript的异步执行

    一般来说,js.html都是按照从上至下这种方式来进行执行的.这就造成了,基本上所有的执行过程都是在一个线程中进行. 我们都知道,ajax的使用大大的提高了前后台的沟通效率,那么有没有什么方式,让js ...

  7. JVM平台上的响应式流（Reactive Streams）规范

    // Reactive Streams // 响应式流是一个倡议,用来为具有非阻塞后压的异步流处理提供一个标准.大家努力的目标集中在运行时环境(JVM和JavaScript)和网络协议上. 注:响应式 ...

  8. Docker进阶之五:容器管理

    容器管理 一.创建容器常用选项 docker container --help 指令 描述 资源限制指令 -i, --interactive 交互式 -m,--memory 容器可以使用的最大内存量 ...

  9. 【深度学习系列】PaddlePaddle垃圾邮件处理实战（二）

    PaddlePaddle垃圾邮件处理实战(二) 前文回顾   在上篇文章中我们讲了如何用支持向量机对垃圾邮件进行分类,auc为73.3%,本篇讲继续讲如何用PaddlePaddle实现邮件分类,将深度 ...

  10. ADO.NET学习（一）

    一.ADO.NET简介 ADO.NET可以看作是C#语言访问数据库的一种方式.编程语言编写的程序需要数据库的支持,那么怎样才能让他们建立连接呢?当然是ADO.NET 二.ADO.NET 整体流程 1) ...