• <!-- 传统写法 -->
<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>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <!-- 引入 vue.js -->
  9.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10.     <style>
  11.         .red{
  12.             color:red;
  13.         }
  14.         .thin{
  15.             font-weight: 200;
  16.         }
  17.         .italic{
  18.             font-style: italic;
  19.         }
  20.         .active{
  21.             letter-spacing: 0.5em;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div id="app">
  27.         <!-- 传统写法 -->
  28.         <h1 class="red thin">这是一个h1标签</h1>
  29.  
  30.         <!-- 第一种使用方式，直接传递一个数组 -->
  31.         <h1 :class="['red', 'italic']">这是第二个h1标签</h1>
  32.  
  33.         <!-- 在这里可以使用三元表达式 -->
  34.         <h1 :class="['red', 'italic', flag?'active':'']">这是第三个h1标签</h1>
  35.  
  36.         <!-- 简化写法 在数组中使用对象来代替三元表达式 -->
  37.         <h1 :class="['red','italic',{'active':flag}]">这是第四个h1标签</h1>
  38.  
  39.         <!-- 直接使用对象 -->
  40.         <h1 :class="{red:true, italic:false, thin:true, active:flag}">来来来，大战一场</h1>
  41.     </div>
  42.     <div id="article">
  43.         <p class="green thin">我的段落1</p>
  44.         <p :class="{red:true, active: pres}">我的段落2</p>
  45.     </div>
  46.  
  47. </body>
  48. <script>
  49.     // 实例化vue对象
  50.     let vm1 = new Vue({
  51.         // 绑定对象
  52.         el: '#app',
  53.         data: {
  54.             flag: true
  55.         },
  56.         methods: {
  57.  
  58.         }
  59.     })
  60.     let vm2 = new Vue({
  61.         el: '#article',
  62.         data: {
  63.             pres: false
  64.         }
  65.     })
  66. </script>
  67. </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. Android startActivity原理分析(基于Android 8.1 AOSP)

    应用进程内 如何使用Intent做Activity的跳转 Intnet intent = new Intent(MainActivity.this,TestActivity.class); start ...

  2. Git - git branch - 查看远端所有分支

    索引: 目录索引 一.示例: git branch -r 二.说明: 该命令将列出仓库中所有存在的远端分支,无论该分支是否已签出到本地. 蒙 2018-09-29 19:59 周六

  3. 数字信号处理专题（3）——FFT运算初探

    一.前言 FFT运算是目前最常用的信号频谱分析算法.在本科学习数字信号处理这门课时一直在想:学这些东西有啥用?公式推来推去的,有实用价值么?到了研究生后期才知道,广义上的数字信号处理无处不在:手机等各 ...

  4. jquery删除内容是动态修改序号

    如图,点击删除图标的时候要删除当前的一条记录,同时界面上的序号要动态的排列好 以下是html结构: jquery实现思路: 首先,需要获取到当前要删除盒子的序号$indexCur,然后遍历父盒子,取出 ...

  5. nginx.conf添加lua.conf配置

    1.在nginx的conf下配置lua.conf......vi lua.conf server { listen ; server_name _; location /lua { default_t ...

  6. qml demo分析(threading-线程任务)

    一.关键类说明 qml内置了WorkerScript组件,该组件有一个source属性,可以加载js文件,含有一个名为message的信号,意味着他有一个默认的onMessage槽函数,除此之外他还有 ...

  7. springboot~内嵌redis的使用

    对于单元测试来说,我们应该让它尽量保持单一环境,不要与网络资源相通讯,这样可以保证测试的稳定性与客观性,对于springboot这个框架来说,它集成了单元测试JUNIT,同时在设计项目时,你可以使用多 ...

  8. mysql索引规范

    索引并不是越多越好!索引可以提高查询效率,但会降低增删改效率.但多了甚至会降低查询效率. Innodb是按照主键索引的顺序来组织表,如没有建立主键,mysql会选择第一个非空唯一索引做为主键,或生成一 ...

  9. 百度地图DEMO-路线导航，测距，标点

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. 详解TypScript数据类型转换

    最近在用TypeScript(后面简称TS),发现TS虽然语法和C#差不多但是在很多地方还是不够高级(和C#相比),这里主要聚焦在数据类型强转上面,直接看下面案例吧 string转number 案例如 ...