vue 绑定 添加class 属性 4种方法 添加style 3中方法 v-bind

此文转载自https://www.cnblogs.com/wwlong/p/11283053.html
一、添加class


1.第一种使用方式,直接传递一个数组,注意的 class需要使用 v-bind 做数据绑定

eg:
<h1 :class="['italic','red'">H1标签!!!

2.在数组中使用三元表达式

eg:
<h1 :class="['italic','red',flag?'active':'']">H1标签!!!

3.在数组中使用 对象来代替三元表达式,提高代码的可读性

{'active':flag}]">H1标签!!!

4.在为class使用v-bind 绑定 对象的时候,对象的属性是类名,由于对象的额属性可带引号,也可以不带引号;属性的值是一个标识符

(1).

{'red':true,thin:true,italic:true,active:true}">H1标签!!!

(2).

H1标签!!!

二、添加style
1.直接在元素上通过:style的形式,书写样式对象

{color:'red','font-size':'40px'}">h1标签

2.将样式对象定义到data中,并直接引用到:style

<h1 :style="styleobj">h1标签

3.在:style中通过数组,引用多个data上的样式对象

<h1 :style="[styleobj,styleobj2]">h1标签

你可能感兴趣的:(vue,vue,js)