Vue.js笔记------v-if和v-show

一.v-if

1.在vue中，“v-if”用于根据表达式的真假来操作DOM元素，可以切换元素的显示和隐藏；表达式的值为true时，元素存在于dom树中，表达式为false时，元素从dom树中移除，语法为“v-if="表达式"”。

2.v-if的使用

二.v-show

1.w-show指令的作用是根据真假切换元素的显示状态，原理是修改元素的display实现显示隐藏，指令后面的内容，最终都会解析为布尔值，值为true元素显示,值为false元素隐，数据改变之后，对应元素的显示状态会同步更新

2.v-show的使用

点击切换状态 显示/隐藏

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

【v-show】

    1.本质就是标签display设置为none,控制隐藏。只是基于css进行切换。

    2.v-show有更高的初始渲染消耗。

    3.v-show适合频繁切换的情况。

 【v-if】

    1.动态的向DOM树内添加或者删除DOM元素。

    2.v-if有更高的切换消耗。

    3.v-if适合运行条件很少改变的情况。

true

 false