第一部分:vue学习(26-x)

文章目录

  • 26.绑定class样式
  • 27 绑定style内联样式
  • 28 条件渲染
  • 29 列表渲染

26.绑定class样式

在这里插入图片描述
案例1:点击切换class样式。其中noarmal happy都是css定义好的样式。

在这里插入图片描述
案例2:切换随机的样式。

在这里插入图片描述

案例3:css样式,列表生效
在这里插入图片描述

案例4:2个样式,4种组合方式,使用对象样式

在这里插入图片描述

27 绑定style内联样式

方案1:直接在html代码里面使用:style写内联样式
在这里插入图片描述
:style后面跟的需要是表达式,所以就是个对象,不能是常规的css的内联样式写法,font-size需要改成小驼峰。

方案2:对象被vm对象管理。

在这里插入图片描述
案例3:数组对象中配置多个样式

在这里插入图片描述

在这里插入图片描述

总结:用vue写代码,不变的东西正常写,变化的东西,全部写成属性或者函数被vue管理起来。一旦发生变化,vue会帮你渲染界面。
在这里插入图片描述

28 条件渲染

隐藏一个div框,可以是display:none可以是调整透明度。

案例:使用vue实现隐藏,display方式,使用v-show
在这里插入图片描述
在这里插入图片描述

案例:使用vue实现隐藏,使用v-if,整个html元素在渲染的时候都会被删除掉。

在这里插入图片描述

注意 前端判断相等是三个等号

小总结:频率高的用v-show,频率低的用v-if

案例:else if
在这里插入图片描述

跟写三个if是一样的效果,但是效率高点,因为一旦匹配成了一个,后面的就不看了。

案例:else

在这里插入图片描述

注意:if else if else 要连续,下面的案例,肯定就报错
在这里插入图片描述
案例: 一个v-if 控制三个 div的展示,使用模板标签。

在这里插入图片描述
模板标签不会改变页面元素的数量。

总结:

在这里插入图片描述

29 列表渲染

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/321233.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CUDA动态并行

一、简介 1. 综述 动态并行是 CUDA 编程模型的扩展,使 CUDA 内核能够直接在 GPU 上创建新工作并与其同步。 在程序中任何需要的地方动态创建并行性都提供了令人兴奋的功能。 直接从 GPU 创建工作的能力可以减少在主机和设备之间传输执行控制和数据的需要&#xf…

顶帽运算在OpenCv中的应用

项目背景 假如我们拍了一张自拍,想为自己的照片添加一个酷炫的火星飞舞的效果,素材库中正好有一张火焰的照片,如果想去除图中的火焰,只保留火星效果,可以使用顶帽子算法 图片中的火星部分正好属于比周围亮一些的斑块…

C++第四天

定义一个Person类,私有成员int age,string &name,定义一个Stu类,包含私有成员double *score,写出两个类的构造函数、析构函数、拷贝构造和拷贝赋值函数,完成对Person的运算符重载(算术运算符、条件运算…

算法训练day02Leetcode977有序数组平方209长度最小的字数组59螺旋问题

今日学习的文章链接和视频链接 https://www.bilibili.com/video/BV1QB4y1D7ep/?vd_source8272bd48fee17396a4a1746c256ab0ae https://www.bilibili.com/video/BV1tZ4y1q7XE/?vd_source8272bd48fee17396a4a1746c256ab0ae https://programmercarl.com/0059.%E8%9E%BA%E6%97%…

HttpRunner自动化之响应中文乱码处理

响应中文乱码: 当调用接口,响应正文返回的中文是乱码时,一般是响应正文的编码格式不为 utf-8 导致,此时需要根据实际的编码格式处理 示例: 图1中 extract 提取title标题,output 输出 title 变量值&#x…

Proxy 与 defineProperty 的理解、区别、优势、劣势

一、Object.defineProperty() 文档:Object.defineProperty() - JavaScript | MDN 作用:对一个对象进行操作的方法。可以为一个对象增加一个属性,同时也可以对一个属性进行修改和删除。 它是在 ES5 中引入的,使用了 getter 和 s…

OV8856 帧同步功能说明分享

OV8856支持帧同步功能,用于同步两个传感器的输出时序。同步是通过配置OV8856的一个(从设备)FSIN作为输入引脚来接受另一个主传感器设备(也可能是另一个OV8856) VSYNC作为触发信号来实现的。 1.OV8856有专用的GPIO引脚(FSIN)用于帧同步功能。 该引脚可配置为接收外…

[计算机提升] Windows系统软件:管理类

3.6 系统软件:管理类 3.6.1 运行 通过运行程序,在打开输入框中输入名称,按下回车后可以打开相应的程序、文件夹、文档或Internet资源: 3.6.2 命令提示符:cmd 在Windows系统中,cmd是指"命令提示符…

Java 泛型深入解析

Java 中的泛型是一种强大的编程特性,允许我们编写更加通用和类型安全的代码。本篇博客将深入探讨 Java 泛型的各个方面,包括泛型类、泛型方法、泛型接口以及泛型通配符。 1. 泛型类 首先,让我们看一个简单的泛型类的例子。在下面的代码中&a…

SpringBoot全局Controller返回值格式统一处理

一、Controller返回值格式统一 1、WebResult类 在 Controller对外提供服务的时候,我们都需要统一返回值格式。一般定义一个 WebResult类。 统一返回值(WebResult类)格式如下: {"success": true,"code": 2…

【计算机算法设计与分析】n皇后问题(C++_回溯法)

文章目录 题目描述测试样例算法原理算法实现参考资料 题目描述 在nxn格的棋盘上放置彼此不受攻击的n格皇后。按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。n后问题等价于在nxn格的棋盘上放置n个皇后,任何2个皇后不放在同…

jmeter关联依赖---三种

1.正则表达式提取器 2.xpath取样器 3.json提取器