本文编写于 183 天前,最后修改于 135 天前,其中某些信息可能已经过时。

在以前的学习中,给元素添加样式,我们可以行内加入,或者通过类名的方式添加

<style>
    .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

    .active {
      letter-spacing: 0.5em;
    }
  </style>

这一篇讲介绍在vue.js中如何给元素添加样式

使用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>

更多相关系列教程请及时关注妙笔生花个人博客,本网站由皮皮家园终身维护!
1.Vue.js 是什么?起步及安装
http://blog.zh66.club/index.php/archives/474/
2.Vue.js 声明式渲染
http://blog.zh66.club/index.php/archives/476/
3.vue.js 条件与循环
http://blog.zh66.club/index.php/archives/477/
4.vue.js 处理用户输入
http://blog.zh66.club/index.php/archives/478/
5.vue.js实现跑马灯效果
http://blog.zh66.club/index.php/archives/479/
6.vue.js 事件修饰符
http://blog.zh66.club/index.php/archives/480/
7.vue.js 表单输入绑定
http://blog.zh66.club/index.php/archives/481/
8.vue.js 简易的计算器
http://blog.zh66.club/index.php/archives/482/
9.vue.js 中样式的使用
http://blog.zh66.club/index.php/archives/483/
10.vue.js 之 v-forkey 属性
http://blog.zh66.club/index.php/archives/484/
11.vue.js 内容的总结和回顾
http://blog.zh66.club/index.php/archives/485/
12.vue.js 中 v-if 和 v-show 的使用
http://blog.zh66.club/index.php/archives/486/
13.vue.js 品牌案例~列表的添加删除功能
http://blog.zh66.club/index.php/archives/488/
14.vue.js 品牌案例~列表的关键字检索功能
http://blog.zh66.club/index.php/archives/489/
15.vue.js 过滤器的基本使用
http://blog.zh66.club/index.php/archives/491/
16.vue.js 自定义一个私有的过滤器
http://blog.zh66.club/index.php/archives/490/
17.vue.js 生命周期函数演示
http://blog.zh66.club/index.php/archives/492/
18.vue.js 中 vue-resource 基本使用
http://blog.zh66.club/index.php/archives/493/