-
这三个指令与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)]