一、动态绑定class。

可以使用v-bind绑定，如“v-bind:class = ''” ，缩写：“:class = ''”。

不同形式：

1.数组形式(类名必须用''包起来)：

<div :class="['red', 'font16']">内容</div>

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

<div :class="['red', 'thin', isactive?'red':'yellow']">内容</div>

说明：如果“isaction”的布尔值为true，那么使用“red”类，否则“yellow”。

3.数组中嵌套对象：

<div :class="['red', 'thin', {'active': isactive}]">内容</div>

说明：“ {'active': isactive}”中的“isactive”的值为true时，那么使用该类。为false就不使用该类。

4.直接使用对象：

<div :class="{red:true, italic:true, active:true, thin:true}">内容</div>

说明：此对象中，键与值一一对应，当前值为true的时候，当前对应的键（也就是类名）就使用，为false就不应用。

不需要动态绑定的类：

<div class="static" :class="{'active':isActive,'error':isError}"></div>

另外，:class可以与普通class共存。

二、动态绑定style。

可以使用v-bind绑定，如“v-bind:style = ''” ，缩写：“:style = ''”。

不同形式：

1.直接用v-bind绑定 :style = ''：

<div :style="{color: 'red', 'font-size': '40px'}">这是一个文本</div>

如果对象的键有特殊符号“-”等等，那么要用引号括起来。

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

  data: {styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }}

3.如果绑定多个，则写在一个数组中

<div :style='[styleObj1, styleObj2]'>这是一个文本</div>

绑定样式名时，如果写成驼峰命名，则不需要引号，如果是复杂命令，则需要加引号

vue 动态绑定class和动态绑定style多种用法相关推荐

Vue动态绑定class与设置style
我自己总结的 1.三元运算符实现方法一 //花括号可省略 :class="{ 类名: 条件 ? true : false }" :class="{ listItemSe ...
VUE动态绑定Css样式、Style行内样式
VUE动态绑定Css样式.Style样式一.背景这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue ...
Python库引用import多种用法及比较
import多种用法 import<库名> <库名>.<函数名>(<函数参数>) 例如: import turtle turtle.penup() 这种 ...
python的concat用法_python的concat等多种用法详解
本文为大家分享了python的concat等多种用法,供大家参考,具体内容如下 1.numpy中的concatenate()函数: >>> a = np.array([[1, 2], ...
python concat_python的concat等多种用法详解
本文为大家分享了python的concat等多种用法,供大家参考,具体内容如下 1.numpy中的concatenate()函数: >>> a = np.array([[1, 2], ...
面试题目之：说出至少4种vue当中的指令和它的用法？
说出至少4种vue当中的指令和它的用法? (1){{}} .v-html 和v-text ==> 非表单元素 {{}}:以{{data的属性名}}的方式直接使用在标签之间例如: {{name} ...
vue中关于$emit及propos的用法
vue中关于$emit及propos的用法一:父组件可以使用propos把数据传递给子组件. 父组件:在父组件中的子组件标签中,通过父组件给子组件传递函数类型的props实现:子给父传递数据如: 子 ...
二维码URL多种用法总结
二维码URL多种用法一.二维码的类型 1.专属App的二维码 2.通用的URL网页二.二维码判断:User Agent(UA) 三.二维码精进:URL+参数四.二维码推广:携带参数安装五.二维 ...
(java)加号的多种用法
//加号(+)的多种用法 package com.company; /* 1.对于数值来说,就是加法 2.对于char类型来说,在进行与数字的加法运算的时候,char会先转化为int类型然后再进行运 ...

vue 动态绑定class和动态绑定style多种用法

一、动态绑定class。

二、动态绑定style。

vue 动态绑定class和动态绑定style多种用法相关推荐

最新文章

热门文章