在 vue 中，我们可以通过 v-if、v-show、computed 计算属性或者 methods 方法等方式来隐藏或者显示数据。下面，我们来具体了解一下这几种方式。
1. v-if/v-else 控制显示
<template>
<div>
<div v-if="isShow">这是要显示的数据</div>
<div v-else>这是要隐藏的数据</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
}
}
}
</script>在这个例子中，我们通过一个布尔类型的数据 isShow 来控制要显示还是要隐藏数据。当 isShow 的值为 true 时，要显示的数据会显示出来；反之则会隐藏。
2. v-show 控制显示
<template>
<div>
<div v-show="isShow">这是要显示的数据</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
}
}
}
</script>与 v-if/v-else 不同，v-show 是通过控制 CSS display 属性来显示和隐藏数据。当 isShow 的值为 true 时，要显示的数据会显示出来，display 属性为该元素所设定的值，比如默认为 block；反之则会隐藏，display 属性为 none。
v-if/v-else 和 v-show 的使用场景不同，v-if/v-else 适合在需要频繁切换的情况下使用，因为它只有在满足条件的情况下才会渲染对应的内容，然后在不满足条件时销毁并重新渲染；而 v-show 适合在初始渲染时就需要根据条件来控制显示或者隐藏数据的情况下使用，因为它只是单纯的控制 CSS display 属性。
3. computed 计算属性
<template>
<div>
<div>{{ message }}</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
content: '这是要显示的数据'
}
},
computed: {
message() {
if(this.isShow) {
return this.content
} else {
return ''
}
}
}
}
</script>computed 计算属性可以在模板中动态地计算一些值，并将计算结果返回给模板来渲染。在上面的例子中，我们利用了 computed 计算属性中的 message 方法来根据 isShow 值的变化来动态改变要显示的数据。
网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。
立即学习“前端免费学习笔记（深入）”；
4. methods 方法
<template>
<div>
<div>{{ getMessage() }}</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
content: '这是要显示的数据'
}
},
methods: {
getMessage() {
if(this.isShow) {
return this.content
} else {
return ''
}
}
}
}
</script>methods 方法可以在模板中动态地调用某个方法，并将方法的返回值返回给模板来渲染。在上面的例子中，我们利用了 methods 方法中的 getMessage 方法来根据 isShow 值的变化来动态改变要显示的数据。
无论采用哪种方式，关键是根据具体的场景来选择合适的方式来隐藏或者显示数据。
