在我们平常的前端开发中少不了对DOM的操作,以及样式的动态控制,那我们在使用vue的时候该如何灵活的绑定class呢

1.最简单一个class绑定

v-bind:class设置一个对象,可以动态地切换class
例如:
<div id="app">
<div :class ="{ 'active':isActive }"></ div>
</div>
<script>
new Vue({
el :'#app',
data: {
isActive: true
}
})
</script>
最终渲染结果为=====><div class="active"></div>

2对象中也可以传入多个属性,来动态切换class,同时class也可以与:class共存,看下面代码↓

<div id="app">
<div class="title" :class ="{ 'active':isActive, 'addcolor':isAdd }"></ div>
</div>
<script>
new Vue({
el :'#app',
data: {
isActive: true,
isAdd: true
}
})
</script>
最终渲染结果为=====><div class="title active addcolor"></div>

3.当class需要绑定比较多,而且逻辑比较复杂时,我们可以给:class的值绑定一个计算属性,看代码↓

<div id="app">
<div :class ="finalclass"></ div>
</div>
<script>
new Vue({
el :'#app',
data: {
isActive: true,
isAdd: true,
error: true
},
computed: {
return {
'active': this.isActive && this.isAdd,
'error': this.eroor
}
}
})
</script>
最终渲染结果为=====><div class="active error"></div>

4.我们也可以给:class绑定数组格式,以及在数组里再加逻辑,看代码↓

<div id="app">
<div :class ="[ {'active': isActive }, errorShow ]"></div>
</div>
<script>
new Vue({
el :'#app',
data : {
isActive : true ,
errorShow : 'error'
}
})
</script>
最终渲染结果为=====><div class="active error"></div>

5.再来看一种组合式使用方法,看下面代码↓

<div id="app">
<button :class ="finalclass"></button>
</div>
<script>
new Vue({
el :'#app',
data: {
size: 'large',
disabled: true
},
computed: {
finalclass: function (){
return [
'btn',
{
[ 'btn-' + this.size ]: this.size !== '',
[ 'btn-disabled']: this.disabled
}
]
}
}
})
</script>
最终渲染结果为=====><button class ="btn btn-large btn-disabled"></button>

6.绑定内联样式

<div id="app">
<div :style ="finalstyle"></div>
</div>
<script>
new Vue({
el :'#app',
data: {
finalstyle: {
color: 'blue',
fontSize: 16+'px'
//这里css属性的名称用驼峰命名或短横线分割命名
}
}
})
</script>
最终渲染结果为=====><div style="color: blue; font-size: 16px;"></div>

应用多个样式对象时,也可以使用数组语法:

<div :style="style1, style2">123</div>

----------------------------------------------------

vue里如何灵活的绑定class以及内联style的更多相关文章

  1. vue中,class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...

  2. vue 绑定 class 和 内联样式(style)

    <div id="app31"> <!--多个属性 ,号隔开--> <!-- v-bind:style="{fontSize: fontSi ...

  3. vue 组件高级用法(递归组件,内联模板,动态组件,异步组件)

  4. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  5. vue之单表输入绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  6. vue 之 表单输入绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  7. js里的发布订阅模式及vue里的事件订阅实现

    发布订阅模式(观察者模式) 发布订阅模式的定义:它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发 ...

  8. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  9. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

随机推荐

  1. SSH(Spring_SpringMVC_Hibernate)

    Users实体类 package com.tao.pojo; public class Users { private int id; private String name; private Str ...

  2. BZOJ_1598_[Usaco2008 Mar]牛跑步_A*

    BZOJ_1598_[Usaco2008 Mar]牛跑步_A* Description BESSIE准备用从牛棚跑到池塘的方法来锻炼. 但是因为她懒,她只准备沿着下坡的路跑到池塘, 然后走回牛棚. B ...

  3. Linux下网站根目录权限

    网站根目录权限遵循: 文件644 文件夹755 权限用户和用户组www-data 如出现文件权限问题时,请执行下面3条命令: chown -R www-data.www-data /usr/local ...

  4. 【SAP S/4 1511之变】:主数据之变

    本博文主要讲述SAP S/4 1511版本的变化,主要是跟ECC版本的对比.变化还是挺多的,相当一部分是后勤,但绝大部分还是财务成本这一块.作为从事S/4版本的从业者,了解1511版本的变化还是挺有必 ...

  5. Android 7.0 启动篇 — init原理(一)(转 Android 9.0 分析)

    ========================================================          ================================== ...

  6. Node.js + MySQL 实现数据的增删改查

    通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...

  7. Django设置查看原生SQL语句

    LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handlers': { 'console':{ 'level':'DEBU ...

  8. Spring Boot 入门教程 | 图文讲解

    目录 一.Spring Boot 是什么 二.为什么要使用 Spring Boot 三.快速入门 3.1 创建 Spring Boot 项目 3.2 项目结构 3.3 引入 Web 依赖 3.4 编写 ...

  9. ab性能测试工具的使用

    一.什么是ab ab,即Apache Benchmark,是一种用于测试Apache超文本传输协议(HTTP)服务器的工具. ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL地址进行访 ...

  10. KnockOut 绑定之foreach绑定

    foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候,十分有用. 如果你绑定的数组是一 ...