《跟热饭一起学习vue吧》Part.15 样式绑定-class

2023-10-08 02:20

本文主要是介绍《跟热饭一起学习vue吧》Part.15 样式绑定-class,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本公众号 的系列文章《跟热饭一起学习vue吧》,本文会采用非常土,非常low的语言,让读者学习并立即上手即可使用vue去写前端页面。简单生动,由浅入深。那么,就一起开始学习吧,体验一把又土又油腻的教程吧~

别忘了先打开我们的菜鸟编辑器当做草纸吧:右键左下角“阅读原文”在新窗口中打开链接,会打开在线编辑器。

样式绑定 :class

我们先来思考下这个”样式绑定“是什么意思?

样式:元素的样式外观,涉及到的俩个元素标签内的属性是:class 和 style

绑定:vue牛逼不就牛逼在绑定上么,之前我们学习的都是绑定具体的属性值,比如id,name,value ,还有一些具体text文本,也就是标签内夹着的文案。那么现在,vue可以说,连样式,class和style也可绑定,动态的改编绑定的样式,这样就可以让元素的外观,颜色,大小,位置等也可以实时的发生各种变化。

现在,就理解了这个vue的样式绑定是什么意思了吧。

现在,让我们跟随博主,来看看这个样式的写法的演变过程:注意,代码中的active 是一个 公共样式集合,代表长宽100px,颜色绿色。图片

1.不绑定:

来看一下原始的写法:

<div class="active"></div>

2.vue的写法:

<div v-bind:class="{ 'active': true }"></div>

此时,可以通过控制这个值为true还是false来控制是否要采用activer的样式。

3.vue用变量绑定:

<div id="app"><div v-bind:class="{ 'active': isActive }"></div>
</div><script>
new Vue({el: '#app',data: {isActive: true}
})
</script>

这个时候,我们可以通过控制变量isActive的值来让这个div元素随时变幻颜色了。

4.再加一个样式集合。

图片如图,我们可以用控制一个元素的多个样式。

5.在元素的class属性内写个字典。

然后具体的字典来存放多个样式的是否选用。样式名可以用和不用引号。图片

6.更复杂的用法:放在计算属性computed中:

图片如上图,我们用一个函数:classObject 来计算这个元素的样式。其中三个样式,图中用三种方法演示是否使用。

注意这里有三点我们可以学到:

1.样式绑定的函数可以返回一个字典

2.字典中的key可以不用引号包裹

3.样式的值可以是true/false,也可以是表达式,自动计算出true/false。

7.样式用数组包裹

其中数组元素是样式集合的名字:图片这里我们可以学习到俩点:1.元素内的样式名要用引号包裹起来;2.后面的样式会覆盖前面的样式中重复的部分,如background颜色。这种数组存放的多个样式,没办法控制谁显示谁弃用。

8.数组中是变量

图片这样也可以通过控制变量的值,来控制选择什么样式,和字典那种控制是截然不同的俩种思路。

9.数组中用三元表达式

这个三元表达式还真是随处可见,没想到在列表中也可以用呢。

图片

好了本节课就到这里,怎么样,是不是感觉很简单???感觉简单的话,就立马关注下本公众号吧~ 进群学习请加v:qingwanjianhua

这篇关于《跟热饭一起学习vue吧》Part.15 样式绑定-class的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/162025

相关文章

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,:本文主要介绍Go学习记录之runtime包的... 目录前言:一、runtime包内容学习1、作用:① Goroutine和并发控制:② 垃圾回收:③ 栈和

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》:本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

重新对Java的类加载器的学习方式

《重新对Java的类加载器的学习方式》:本文主要介绍重新对Java的类加载器的学习方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍1.1、简介1.2、符号引用和直接引用1、符号引用2、直接引用3、符号转直接的过程2、加载流程3、类加载的分类3.1、显示