Vue 条件渲染v-if和v-show

• 这三个指令与JavaScript的条件语句if、else、else if类似。

• Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

简单的案例演示

v-if的原理：

• v-if后面的条件为false时，对应的元素以及其子元素不会渲染。

• 也就是根本没有不会有对应的标签出现在DOM中。

在 template 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

Title

Paragraph 1

Paragraph 2

</templatehtml

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换

小问题

• 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。

• 但是按道理讲，我们应该切换到另外一个input元素中了。

• 在另一个input元素中，我们并没有输入内容。

• 为什么会出现这个问题呢？

问题解答

• 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

• 在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

解决方案

• 如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key

• 并且我们需要保证key的不同

• 也可以加上需要重置的属性 如在input上加上value ，虽然还是会被复用，但是在复用时也会重置value属性的属性值。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

Hello!

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

[外链图片转存中…(img-ZOjyqSSj-1725441342889)]

[外链图片转存中…(img-Y3jgozFg-1725441342890)]