v-if v-else v-else if 条件指令/ v-if 与 v-show 区别

最新推荐文章于 2025-10-03 09:07:20 发布

原创最新推荐文章于 2025-10-03 09:07:20 发布 · 9.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#v-if #vue #条件 #隐藏 #显示

vue 专栏收录该内容

68 篇文章

订阅专栏

本文详细介绍了Vue.js中条件渲染的两种方式：v-if和v-show。解析了它们的使用场景，包括如何根据布尔值显示或隐藏元素，以及在模板元素上使用v-if来控制一组元素的显示与隐藏。同时，对比了v-if与v-show的区别，帮助开发者选择最适合项目需求的渲染方式。

用法一、布尔值ture/false 显示/隐藏元素

1. true 显示元素：v-if的值和seen 属性值一致，为 true。<p>元素显示


<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
</script>

2.flase 隐藏元素：把app3.seen 属性值改为false，v-if的值也为false，<p>元素隐藏

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

app3.seen=false
</script>

用法二、在<template>元素上使用，显示/ 隐藏整个分组（就是同时显示/ 隐藏多个元素）

注意：

vue 函数绑定的元素要包裹在 <template> 元素外面，也就是说，要绑定在<template> 元素的父元素上，不能直接绑定在<template>元素

例子中，a=new Vue 绑定在 <template> 的父元素<div id="app">

<div id="app">  
<template v-if="true">
<p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
<p >Using v-html directive: </p>
</template>
</div>

<script> //vue js 代码写在这里

var a=new Vue({
el:"#app",                 //绑定的元素
data:{ rawHtml:'<span style="color:red">利用vue添加了插入一个span 元素</span>'  //元素内数据代码 message
}
});

</script>

当v-if 的值为 true 时，网页显示<template> 包裹的所有元素；

网页效果：

当v-if 的值为 false 时，网页隐藏<template> 包裹的所有元素；

<div id="app">  
<template v-if="flase">
<p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
<p >Using v-html directive: </p>
</template>
</div>

网页效果：<template> 包裹的<p>元素都被隐藏了