Vue之class的用法
Vue中class的使用总结如下：
使用形式v-bind:class 简写:class
1.在数组中使用一个class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
color:'blue'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="[color]">文字...</strong>
</div>
</body>
</html>
描述：
1）
a) <strong :class="[color]">文字...</strong>
b) data:{
color:'blue'
}
两者的color名称是对应一致的
2)
a) data:{
color:'blue'
},
b)
.blue{
background: blue;
}
两者的blue名称是对应一致的。
2.在数组中使用多个class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
red:'red',
b:'blue'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="[red,b]">文字...</strong>
</div>
</body>
</html>
描述：
原理和上述使用一个数组一样
3.使用对象形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="{red:true,blue:true}">文字...</strong>
</div>
</body>
</html>
描述：
使用对象的形势的时候，<strong :class="{red:true,blue:true}">文字...</strong>,其中的red,blue都是class的名字，
和数组形势的时候不一样。当为true的时候，显示对应的样式，为false的时候，隐藏对应的样式。现在都是true，
所以文字颜色是红色。背景是蓝色
4.使用对象形式。不同于上一个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:true,
b:false
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="{red:a,blue:b}">文字...</strong>
</div>
</body>
</html>
描述：
和第三种不同的是，使用了a,b两个变量，然后在data中设置a,b的布尔值，从而实现class的显示和隐藏。true
显示，false隐藏。
Vue之class的用法的更多相关文章
- Vue中directives的用法
关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...
- Vue中mixin的用法
在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...
- Vue插件编写、用法详解（附demo）
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- Vue组件的继承用法
Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...
- Vue中的v-cloak用法
v-cloak 的作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...
- vue中keep-alive的用法
1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...
- Vue watch的高级用法
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...
- Vue组件的基础用法（火柴）
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
- vue中$set的用法
数组: this.$set(Array,index, newValue) 对象: this.$set(Object, key, value)
随机推荐
- 2023-07-02：给定一个1~N的排列，每次将相邻两数相加，可以得到新的序列，长度是N-1 再对新的序列，每次将相邻两数相加，可以得到新的序列，长度是N-2 这样下去可以最终只剩一个数字 比如 :
2023-07-02:给定一个1~N的排列,每次将相邻两数相加,可以得到新的序列,长度是N-1 再对新的序列,每次将相邻两数相加,可以得到新的序列,长度是N-2 这样下去可以最终只剩一个数字 比如 : ...
- python接口自动化封装导出excel方法和读写excel数据
一.首先需要思考,我们在页面导出excel,用python导出如何写入文件的 封装前需要确认python导出excel接口返回的是一个什么样的数据类型 如下:我们先看下不对返回结果做处理,直接接收数据 ...
- langchain:Prompt在手,天下我有
目录 简介 好的prompt 什么是prompt template 在langchain中创建prompt template Chat特有的prompt template 总结 简介 prompts是 ...
- Python安装time库失败？不是吧阿sir你还不知道内置模块不用下载吧
嗨嗨,今天给python安装time库,一直报错,换源等办法都试过了 直到我看到 Python中有以下常用模块不用单独安装 random模块 sys模块 time模块 os系统操作 re正则操作 js ...
- 学习lspci：总线
00:00.0 Host bridge 总线地址 00:00.0 是指PCI总线上的第一个设备,也称为根复杂性总线.在PCI架构中,每个设备都有唯一的总线地址,由域号.总线号.设备号和功能号组成.其中 ...
- Django: ERRORS: ?: (staticfiles.E001) The STATICFILES_DIRS setting is not a tuple or list. HINT: Perhaps you forgot a trailing comma?
必须是数组或者列表类型 如下所示: # 错误# STATICFILES_DIRS = { # os.path.join(BASE_DIR, 'static'), # }# 正确 STATICFILES ...
- WPF实现跳动的字符效果
本文将介绍一个好玩但实际作用可能不太大的动画效果:跳动的字符.为了提高动画效果的可重用性以及调用的灵活性,通过Behavior实现跳动的字符动画.先看下效果: 技术要点与实现 通过TextEffect ...
- 开机自动打开termux以及启动termux的服务
ps:因为我们的服务是安装在平板上面的termux,客户不想维护麻烦,如果平板重启之后还需要手动启动ternux,还要开启命令启动服务,这样比较麻烦,所以研究如下操作 1.安装macroDroid 直 ...
- 新一代Kerberos攻击 钻石票据与蓝宝石票据
新一代Kerberos攻击 | 钻石票据与蓝宝石票据 0x01 前言 在了解票据攻击的过程中,看见了一篇文章使用Rubeus进行钻石票据攻击.但是没有原理,于是抱着学习的心态在Google上寻找文章发 ...
- Adapter 适配器模式简介与 C# 示例【结构型1】【设计模式来了_6】
〇.简介 1.什么是适配器模式? 一句话解释: 两个无关联的类,通过实现同一接口或继承对方得到新的适配器类,新的适配器类中通过实现原本类的操作,可达到进行相同的操作的目的. 适配器模式(Apapt ...