vue class与style 绑定详解——小白速会
时间:2022-05-08
本文章向大家介绍vue class与style 绑定详解——小白速会,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、绑定class的几种方式
1.对象语法
直接看例子:
<div id="app3">
<div :class="{'success':isSuccess,'fail':isFail}">对象绑定class</div> //简单的处理直接使用数据来判断
<div :class="classes">计算属性绑定class</div> //当class的表达式过长或逻辑复杂时,使用计算属性
</div>
var app3 = new Vue({
el: '#app3',
data: {
isSuccess: true,
isFail: false,
error: false
},
computed: {
classes: function(){
return {
success: this.isSuccess && !this.error,
fail: this.isFail || !this.error
}
}
}
});
2.数组语法
直接看例子:
<div id="app4">
<div :class="[successCls,failCls]">绑定多个class属性</div> //用于来绑定多个class属性
<div :class="[{'success':isSuccess},failCls]">绑定多个class属性一</div> //动态的判断添加那些class属性,是最常用的
</div>
var app4 = new Vue({
el: '#app4',
data: {
successCls: 'success',
failCls: 'fail',
isSuccess: true,
isFail: false
}
});
<div id= ”app”>
<button :class= ”classes”></button>
</div>
var app = new Vue({
el: '#app',
data:{
size : 'large',
disabled : true
},
computed: {
classes: function(){
return [
'btn',
{
['btn-'+this.size]: this.size,
["btn-disabled"]: this.disabled
}
]
}
}
});
使用计算属性给元素动态设置类名,在业务中经常用到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或逻辑复杂,应该尽可能地优先使用计算属性。
3.在组件上使用
直接看例子:
<div id="app5">
<my-component :class="{'success': isSuccess}"></my-component>
</div>
Vue.component('my-component',{
template: '<div class="fail">绑定组件class属性</div>'
});
var app5 = new Vue({
el: '#app5',
data: {
isSuccess: true
}
});
这种用法仅适用于自定义组件的最外层是一个根元素,否则会无效,当不满足这种条件或需要给具体的子元素设置类名时,应当使用组件的props 来传递。
二、绑定内联样式
直接看例子:
<div id="app6">
<div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
</div>
var app6 = new Vue({
el: '#app6',
data: {
color: 'red',
fontSize: 14
}
});
大多数情况下, 直接写一长串的样式不便于阅读和维护,所以一般写在data 或computed 里
<div id="app6">
<div :style="style">文本</div>
</div>
var app6 = new Vue({
el: '#app6',
data: {
style: {
color: 'red',
fontSize: 14
}
}
});
- nginx支持跨域访问
- nginx静态资源文件无法访问,403 forbidden错误
- vue.js如何在标签属性中插入变量参数
- SpringBoot解决ajax跨域问题
- WebBrowser(IE) 与 JS 相互调用
- HOSTS配置问题导致集群异常故障分析
- Linux Regulator Framework(2)_regulator driver
- systemd的作用
- alsa声卡分析alsa-utils调用过程(二)-tinymixer
- alsa声卡分析alsa-utils调用过程(一)-tinyplay
- ALSA声卡驱动的DAPM(二)-建立过程
- ALSA声卡驱动的DAPM(一)-DPAM详解
- 高通Audio中ASOC的codec驱动(二)
- vue项目里的日期格式化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python第三十六课——2.迭代器对象
- python第三十七课——模块
- Linux系统MySQL数据库主从同步实战过程
- 最火的java8新特性:Lambda 表达式
- python第三十九课——面向对象(二)之设计类
- python第三十九课——面向对象(二)之初始化属性
- LVS服务DR模式安装布署过程
- python第四十课——构造函数
- python第四十一课——析构函数
- python第四十二课——__str__(self)函数
- python第四十三课——封装性
- Nginx+Tomcat多实例及负载均衡配置
- python第四十四课——继承性之单继承
- python第四十五课——继承性之多重继承
- Linux系统——keepalived高可用集群服务