v-if和v-show的区别

简介: v-if和v-show的区别

1.v-show

v-show指令的作用是:根据真假值切换元素的显示状态,是响应式的

语法表达v-show = " 表达式 "

原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏

指令后面的内容最终都会解析为布尔值

值为真(true)的时候元素显示,值为假(false)的时候元素隐藏

数据改变之后呢对应的元素的显示状态也是会同步更新的

例:

<div v-show="status==1"></div>
//代表的就是当status等于1的时候这个元素显示

2.v-if

  • v-if指令的作用:根据表达式的真假切换元素的显示状态
  • v-if = "表达式"
  • 本质是通过操纵dom元素来进行切换显示
  • 表达式的值为true的时候元素存在于dom树中,为false的时候从dom树中移除

3.v-show和v-if的区别

v-show指令:元素始终被渲染到HTML,它只是简单的伪元素设置css的style属性,当不满足条件的元素被设置style=“display:none”的样,是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏

v-if指令:满足条件是会渲染到html中,不满足条件时是不会渲染到html中的,是通过操纵dom元素来进行切换显示

相关文章
|
1月前
|
前端开发 JavaScript
v-if和v-show的区别
v-if和v-show的区别
24 0
|
10月前
|
JavaScript
v-show和v-for区别
v-show和v-for区别
v-show和v-for区别
|
9月前
|
JavaScript 算法 前端开发
v-show和v-if有什么区别?使用场景分别是什么?
v-show和v-if有什么区别?使用场景分别是什么?
99 0
|
10月前
|
JavaScript 前端开发
|
10月前
|
JavaScript 前端开发
v-show和v-if的区别(面试题)
v-show和v-if的区别(面试题)
43 0
|
11月前
|
JavaScript 前端开发
v-show和v-if区别
v-show和v-if区别
118 0
|
11月前
|
JavaScript 前端开发
v-if和v-show的区别?
v-if和v-show都是Vue.js框架中的指令,用于根据条件显示或隐藏DOM元素,但它们的实现方式不同,导致在使用时需要注意以下区别:
|
JavaScript 前端开发
|
JavaScript 前端开发
v-if与v-show的使用方法以及区别
v-if与v-show的使用方法以及区别 在vue里面有两种方式来控制元素的显示与隐藏,分别是v-if和v-show,这两种方式都可以控制元素的显示与隐藏,那么如何进行使用呢?
v-show的使用
v-show的使用
55 0