• <!-- 传统写法 -->
<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. Soot生成代码控制流图

    Soot可以对代码进行分析,提供了多种字节码分析和变换功能,通过它可以进行过程内和过程间的分析优化,以及程序流图的生成,还能通过图形化的方式输出. http://www.brics.dk/SootGu ...

  2. Microsoft Edge浏览器下载文件乱码修复方法

    随着Windows10的普及,Microsoft Edge自带浏览器使用频率逐渐提升,在日常使用过程中我们会发现一个常规的问题是使用Edge进行日常文件下载的时候,N多情况下可能都是乱码,同样的下载链 ...

  3. 远程连接身份验证错误，又找不到加密Oracle修正

    远程连接服务器出现了错误,错误信息为:远程连接身份验证错误,又找不到加密Oracle修正. 服务器系统:Windows Server2016 客户端系统:Windows10家庭版和专业版   出错原因 ...

  4. hadoop 笔记（hive)

    //**********************************//安装配置1. 修改配置文件 1.1 在conf文件夹下 touch hive-site.xml <configurat ...

  5. C#操作剪切板(Clipboard)

    剪切板是Windows系统提供的功能,从我最早接触到的Windows 3.2版本开始,就一直带着了.以前使用C++的时候,是直接使用Windows API对其进行操作的,到了.NET下,在WinFor ...

  6. 分布式架构原理解析，Java开发必修课

    1. 分布式术语 1.1. 异常 服务器宕机 内存错误.服务器停电等都会导致服务器宕机,此时节点无法正常工作,称为不可用. 服务器宕机会导致节点失去所有内存信息,因此需要将内存信息保存到持久化介质上. ...

  7. #Java学习之路——基础阶段二（第六篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  8. 安装window下的redis，redis可视化管理工具（Redis Desktop Manager）安装，基础使用，实例化项目

    以下包括内容: 一.redis下载安装,启动 二.Redis可视化管理工具(Redis Desktop Manager)安装 三.实例化项目 一.redis下载安装,启动 1,redis官方下载地址: ...

  9. JSP 内置对象（上）

    JSP 内置对象是 Web 容器创建的一组对象,不使用 new 关键字就可以直接使用的对象.如上一章中使用脚本实现打印九九乘法表中的out对象 <%-- 脚本:out对象是JSPWriter类的 ...

  10. [特别公告]RDIFramework.NET微信公众号迁移通知

    亲爱的伙伴们: 非常感谢您们一直以来对RDIFramework.NET开发框架的关注和支持! 为了进一步完善各项功能,能给大家提供更专业.更官方准确的框架资讯,提供更优质的框架合作服务,我们的微信公众 ...