Vue中v-if和v-show的不同及其实现原理
程序员文章站
2022-03-30 22:28:57
...
各位好,本人瓜哥,最近接触前端项目比较多,尤其当前vue使用相当流行。对于vue中的条件指令 v-if
和 v-show更容易混淆。
相应使用演示请下载
https://gitee.com/yangdechao_admin/vue-guage.git,具体代码请查看demo1.vue
实现原理
v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐
- 使用了 v-if 的时候,如果值为 false ,那么页面将不会有这个 html 标签生成。
- v-show 则是不管值为 true 还是 false ,html 元素都会存在,只是 CSS 中的 display 显示或隐藏
demo实验
在vue项目中创建demo1.vue文件,如下面内容
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="item.id">
<div @click="toggleShow(index)">
这里是正常显示的部分,通过点击触发隐藏部分显示或隐藏
</div>
<div v-show="item.show">
这里是隐藏的部分
</div>
</li>
</ul>
<div class="box" v-if="show"></div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: 'status',
data: function() {
return {
list: [{
id: 1,
title: '项目一',
show: false
},
{
id: 2,
title: '项目二',
show: false
},
{
id: 3,
title: '项目三',
show: false
}
],
show:false
}
},
created: function() {
},
methods: {
toggleShow(index) {
this.list[index].show = !this.list[index].show
}
}
}
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
然后在项目路由中添加对应的路由/demo1
import demo1 from '@/components/demo1'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [{
path: '/',
name: 'index',
component: index
}, {
path: '/render',
name: 'render',
component: render
}, {
path: '/preview',
name: 'preview',
component: preview
},{
path: '/demo1',
name: 'demo1',
component: demo1
}]
})
预览效果
通过http://localhost:8080/demo1访问打开对于的路由页面
上一篇: 字频统计1-字符串中没有标点符号
下一篇: Python实现注册和三次验证登录