建设网站硬件,外网搭建,航天桥网站建设,网站源码编辑软件1.何为条件渲染 条件渲染就是在指定的条件下#xff0c;渲染出指定的UI。比如当我们显示主页的时候#xff0c;应该隐藏掉登录等一系列不相干的UI元素。即UI元素只在特定条件下进行显示。而在VUE3中#xff0c;这种UI元素的显示和隐藏可以通过两个关键字#xff0c;v-if 和…1.何为条件渲染 条件渲染就是在指定的条件下渲染出指定的UI。比如当我们显示主页的时候应该隐藏掉登录等一系列不相干的UI元素。即UI元素只在特定条件下进行显示。而在VUE3中这种UI元素的显示和隐藏可以通过两个关键字v-if 和v-show来实现。但是虽然实现的功能一样但他们两者有着一些细微的区别。总结起来这个区别就是v-show控制UI元素隐藏时只是将UI的显示状态变成了不可见实际上这个UI是存在的但是v-if隐藏UI元素时则是直接干掉了这个UI元素使其不显示具体的区别我们通过下面的示例分析。 2.示例解析 代码示例如下 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlehello world/titlescript srchttps://unpkg.com/vuenext/script
/head
bodydiv idroot/div/body
scriptconst app Vue.createApp({data() {return {show: false,conditionOne:false,conditionTwo:true}},template: div v-ifconditionOneif/divdiv v-else-ifconditionTwoelse if/divdiv v-elseelse/divdiv v-show showhello,Im show/divdiv v-ifshow hello,Im if/div});const vm app.mount(#root);
/script
/html上面的示例中分别展示了几个内容一是可以使用v-if 实现if…else if…else的条件控制语句二是v-if和v-show的使用方法三是v-if和v-show的区别。前两个都比较简单我们不多做赘述。我们看下v-if和v-show的区别 html 部分代码 div v-show showhello,Im show/div
div v-ifshow hello,Im if/divVue.js 部分代码 data(){return {show: false}}我们使用show变量控制两个div显示和隐藏运行结果如下 运行后我们可以发现“hello,I’m show”和“hello,I’m if”的div都消失了其中v-show的隐藏方式是直接给div加了一个css样式styledisplay:none; div还是被渲染出来了只是没有显示而v-if是直接把div给干掉了。 3.总结
使用条件渲染的时候v-show的方式隐藏dom元素时会添加一个styledisplay:none;样式来达到显示隐藏dom元素的效果而v-if的方式是通过创建和销毁dom元素的方式来显示和隐藏dom元素所以我们需要快速显示和隐藏dom元素时我认为使用v-show更好因为dom元素一直在只需要修改CSS属性就可以快速显示和隐藏,而v-if的方式会创建和销毁dom元素这种方式dom元素的创建和销毁需要耗时。如果是为了内存性能考虑推荐使用v-if,毕竟dom元素一隐藏就会回收掉其占用的内存。
