vue里如何灵活的绑定class以及内联style
在我们平常的前端开发中少不了对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的更多相关文章
- vue中,class、内联style绑定、computed属性
1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...
- vue 绑定 class 和 内联样式(style)
<div id="app31"> <!--多个属性 ,号隔开--> <!-- v-bind:style="{fontSize: fontSi ...
- vue 组件高级用法(递归组件,内联模板,动态组件,异步组件)
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- vue之单表输入绑定
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- vue 之 表单输入绑定
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- js里的发布订阅模式及vue里的事件订阅实现
发布订阅模式(观察者模式) 发布订阅模式的定义:它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发 ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
随机推荐
- SSH(Spring_SpringMVC_Hibernate)
Users实体类 package com.tao.pojo; public class Users { private int id; private String name; private Str ...
- BZOJ_1598_[Usaco2008 Mar]牛跑步_A*
BZOJ_1598_[Usaco2008 Mar]牛跑步_A* Description BESSIE准备用从牛棚跑到池塘的方法来锻炼. 但是因为她懒,她只准备沿着下坡的路跑到池塘, 然后走回牛棚. B ...
- Linux下网站根目录权限
网站根目录权限遵循: 文件644 文件夹755 权限用户和用户组www-data 如出现文件权限问题时,请执行下面3条命令: chown -R www-data.www-data /usr/local ...
- 【SAP S/4 1511之变】:主数据之变
本博文主要讲述SAP S/4 1511版本的变化,主要是跟ECC版本的对比.变化还是挺多的,相当一部分是后勤,但绝大部分还是财务成本这一块.作为从事S/4版本的从业者,了解1511版本的变化还是挺有必 ...
- Android 7.0 启动篇 — init原理(一)(转 Android 9.0 分析)
======================================================== ================================== ...
- Node.js + MySQL 实现数据的增删改查
通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...
- Django设置查看原生SQL语句
LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handlers': { 'console':{ 'level':'DEBU ...
- Spring Boot 入门教程 | 图文讲解
目录 一.Spring Boot 是什么 二.为什么要使用 Spring Boot 三.快速入门 3.1 创建 Spring Boot 项目 3.2 项目结构 3.3 引入 Web 依赖 3.4 编写 ...
- ab性能测试工具的使用
一.什么是ab ab,即Apache Benchmark,是一种用于测试Apache超文本传输协议(HTTP)服务器的工具. ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL地址进行访 ...
- KnockOut 绑定之foreach绑定
foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候,十分有用. 如果你绑定的数组是一 ...