[vue3快速入门] 3.vue控制元素的显示与隐藏
2021-09-10 本文已影响0人
林哥学前端
在我们的开发过程中，控制一个元素的显示与隐藏是最常见、最简单的功能之一了，
举个最简单的例子，
现在有一个超级英雄叫 托尼·史塔克，
下面有一段他的简介，内容很多，默认状态下是不显示的，然后点击一个按钮后才显示简介。
显示隐藏简介
在vue有一个控制元素显示隐藏的指令，v-if，
<div v-if="showDetail">内容</div>
这里我们v-if绑定了一个数据showDetail，一般是boolean型的值，如果这个值是true时，这个div就显示，如果showDetail为false时，div就隐藏。所以要控制元素的显示与隐藏，我们只要改变showDetail这个值就行了。
下面是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// v-if
const vueApp = Vue.createApp({
data() {
return {
showDetail: true,
}
},
methods: {
onBtnClick() {
this.showDetail = !this.showDetail // 在点击按钮是，改变showDetail的值
},
},
template: `
<div>
<h1>托尼·史塔克<button @click="onBtnClick">显示/隐藏详情</button></h1>
<p v-if="showDetail">托尼·史塔克（Tony Stark）即初代钢铁侠（Iron Man）...</p>
</div>
`,
})
vueApp.mount('#app')
</script>
</body>
</html>
跟之前一样，showDetail是data中的一个数据，在点击按钮时，我们给this.showDetail取反，就是如果是true，就设置为false，如果是false，就设置为true
跟随着showDetail的变化，简介这个p元素也随着显示隐藏。
在vue中还有另外一个控制显示隐藏的指令v-show，
我们把代码中v-if换成v-show同样可以实现相同的效果，那么它们有什么不同，打开开发者工具，我们找到显示隐藏的p标签，对比一下就发现了
如果使用v-if，在showDetail这个值是false时，dom里就没有这个元素了
如果使用v-show，在showDe这个值是false时，这个p标签在dom里还有，只是它的dispaly属性变成了none，所以就不显示了。
那在实际工作中，我们要认真区分v-if和v-show的使用
规则也很简单
如果一个元素在确定要显示或者隐藏后，就不再变化了，使用v-if
如果一个元素可能会频繁的切换显示隐藏，使用v-show
这节课的内容就是这些了，动手写一写，记得更清楚。
