Vue的v-if和v-show的区别图文介绍
作者:·菠萝皮~ 发布时间:2024-04-30 10:41:40
标签:Vue,v-if,v-show
一、v-if和v-show区别
① v-show严格意义来说其实是条件隐藏,直接在页面初始化的时候将DOM(对象模型)元素也初始化,因为它就是将它所在的元素添加一个display属性为none,如果条件符合就显示。
a. 文本框中无内容,默认为false,所以属性显示
b. 文本框中输入d,false变为ture,属性消除
② v-if严格意义来说就是条件判断,符合就加载DOM(对象模型)元素,不符合就不显示。
a. 文本框中无内容时,不加载
b. 文本框中输入d,加载DOM
二、生命周期
v-if每切换一次就要重新走一次生命周期,比如说重新构建内部事件和函数,而v-show则就是页面初始时走一遍生命周期,将其加载完毕,其他时候则都不会走相关的周期了。
三、性能的差异
① v-if有更高的切换性能,比如说需要判断多个条件时,就使用if。
② 如果需要频繁的切换,选择v-show,因为show是动态的改变样式,不需要增删DOM(对象模型)元素,大项目推荐使用show,能极大减少浏览器后期的操作性能。
③ show不支持<template>语法。
代码尝试:
Ⅰ. v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if</title>
<script src="/工具/vue.js"></script>
</head>
<body>
<div id="app">
快递单号 <input type="text" v-model="id">
<button>查询</button><br>
<div v-if="id">
<input type="text" v-model="id" style="font-size: 2rem;">
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
id: '',
},
methods: {
},
})
</script>
</body>
</html>
Ⅱ. v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show</title>
<script src="/工具/vue.js"></script>
</head>
<body>
<div id="app">
快递单号 <input type="text" v-model="id">
<button>查询</button><br>
<div v-show="id">
<input type="text" v-model="id" style="font-size: 2rem;">
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
id: '',
},
methods: {
},
})
</script>
</body>
</html>
来源:https://blog.csdn.net/weixin_47627102/article/details/121348598
0
投稿
猜你喜欢
- 我采用的是MySQLdb操作的MYSQL数据库。先来一个简单的例子吧: import MySQLdb try: conn=MySQLdb.c
- 本月第一天日期SELECT FirstDayOfCurrentMonth = dateadd(mm,datediff(mm,0,getdat
- 1. 模板编译Vue的模板编译就是将模板字符串转换为渲染函数的过程。具体来说,当组件的生命周期执行到created和beforeMounte
- Jinja2需要Python2.4以上的版本。 安装 按照Jinja有多种方式,你可以根据需要选择不同的按照方式。 使用easy_insta
- MyISAM和MEMORY采用表级锁(table-level locking)BDB采用页面锁(page-leve locking)或表级锁
- 1. 项目背景在python 即时网络爬虫项目启动说明中我们讨论一个数字:程序员浪费在调测内容提取规则上的时间,从而我们发起了这个项目,把程
- 前言当数据库中存量数据较多时,或者是在批量插入操作时,很容易出现插入重复数据的问题。一、三种方法在 mysql 中,当存在主键冲突或唯一键冲
- Numpy是python常用的一个类库,在python的使用中及其常见,广泛用在矩阵的计算中,numpy对矩阵的操作与纯python比起来速
- 工具:Pycharm,Django1.11.9.1.下载django_admin_bootstrappedpip install djang
- 前言经常看到这种算法可视化的图片,但往往做不到和画图的人心灵相通,所以想自己画一下,本文主要实现归并排序和希尔排序,如果想实现其他算法可参考
- 描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能。本文作者想同你一起探讨如何使用AJAX技术来解
- Juan Pablo De Gregorio 的 原文很多人都问我如何为一本杂志、一份报纸、一张海报、一份简报或是一份出版物选择
- 实例如下所示:import osos.chdir("G:\Python1\Lib\site-packages\pytesser&q
- 介绍我们用django在本地调试完了之后,会在服务器上进行部署,如果是大佬那就忽略本文章,如果是萌新对编程命令不太熟悉,那就要用到宝塔了。流
- 关于什么是用户权限,最简单的定义可能是,“用户能做什么和不能做什么。”在这里,简单的定义就相当不错了。 用户的权限分为3类: l 登录的权限
- 目录结构:testtest/index.phptest/test_zip.ziptest/test_zip<span style=&q
- #_*_coding:utf_8_import sysimport osclass Graph(): d
- MySQL5.7.21安装与密码设置教程,具体如下官方参考手册1.解压MySQL 5.7.20安装包,如X:\MySQL\mysql-5.7
- 前言初次了解JWT,很基础,高手勿喷。基于Token的身份验证用来替代传统的cookie+session身份验证方法中的session。to
- win8下python安装和环境配置,具体内容如下python语法较C语言简单,容易上手。具体步骤 1.本文采用的是win8.1 64位系统