web学习笔记(五十五)

2024-05-16 02:28
文章标签 学习 笔记 web 五十五

本文主要是介绍web学习笔记(五十五),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

1. 配置代码片段的步骤

2. 条件判断

2.1 v-if、v-else、v-else-if

2.2  v-show

2.3 v-show和v-if的区别


1. 配置代码片段的步骤

在Visual Studio Code中我们可以将常用的代码配置成代码片段,这样就可以在页面上快速输入大段代码了。

(1)通过下列网址将需要配置的代码转换为对应格式:

https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode 

(2) 点击设置页面中的用户代码片段

(3) 点击新建全局代码片段文件,然后在输入框中输入自定义的命令名 eg:vuehtml;然后点回车。

(4)将通过网址转换后的代码粘贴到对应文件中 ,然后保存就可以在页面中使用自定义代码片段了。

2. 条件判断

2.1 v-if、v-else、v-else-if

  • v-if 指令用于选择性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。可以用来控制元素的显示和隐藏。
  • 用v-else指令来表示v-if的指令条件为假时,要渲染的内容。
  • 无论是v-if还是结合 v-else 都只是根据一个条件的真与假来进行选择性的渲染模板内容,若遇到 需要判断多个条件时,则可以使用 案例:成绩等级判断 v-else-if 指令配合 v-if 和 v-else 来完成。
    <body><div id="app"><!-- 条件判断指令 指令值为true则显示该元素 若值为false则隐藏该元素 --><h1 v-if="age<18">未成年</h1><h1 v-else>成年</h1><h2 v-if="num<5">小于5</h2><h2 v-else-if="num==5">等于5</h2><h2 v-else>大于5</h2></div><script src="./vue.js"></script><script>new Vue({el: '#app',data: {age: 17,num:5,isShow:true}})</script></body>
  •  vue2中不建议v-if和v-for同时使用在同一标签,在vue2中v-for指令的优先级要高于v-if 。这意味着每循环一次都要加载一次if判断,这将会浪费大量性能。如果非要一块使用可以嵌套使用。
    <ol><li v-for="(item,index) in userList"><div>{{item.name}}</div><div v-if="item.age>=18">成年人</div><div v-else>未年人</div><div v-if="item.sex">男</div><div v-else>女</div></li></ol>

2.2  v-show

v-show 指令是另一个用于根据条件来渲染模板内容,可以用来控制元素的显示和隐藏。

<body><div id="app"><!-- v-show也可以控制元素的显示与隐藏 --><h3 v-show="isShow">好好学习天天向上</h3></div><script src="./vue.js"></script><script>new Vue({el: '#app',data: {age: 17,num:5,isShow:true}})</script></body>

2.3 v-show和v-if的区别

便于记忆版:

  1.  v-show和v-if都可以控制元素的显示和隐藏。
  2.  v-show通过设置元素的css样式display来控制元素的显示与隐藏 而 v-if则通过删除插入节点来控制元素的显示与隐藏。
  3.  只渲染一次时一半使用v-if指令 频繁切换使用v-show指令。

正规版:

  1. v-if 是'真正'的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销 毁和重建。换言之在条件为假的时候,dom中是不存在此元素的。
  2. v-show 则不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。换言 之,v-show 元素一开始九被渲染到页面中了,只是通过条件的真与假,改变display的属性值,从而实 现元素的显示和隐藏。
  3. v-if 有更高的切换开销,而 则使用 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换, v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 

这篇关于web学习笔记(五十五)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

web网络安全之跨站脚本攻击(XSS)详解

《web网络安全之跨站脚本攻击(XSS)详解》:本文主要介绍web网络安全之跨站脚本攻击(XSS)的相关资料,跨站脚本攻击XSS是一种常见的Web安全漏洞,攻击者通过注入恶意脚本诱使用户执行,可能... 目录前言XSS 的类型1. 存储型 XSS(Stored XSS)示例:危害:2. 反射型 XSS(Re

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》:本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择