vue.js库中的条件渲染介绍
程序员文章站
2024-01-17 12:04:40
vue.js库中的条件渲染介绍
vue.js库中的条件渲染介绍
<body>
<p id="app">
<p v-if="isshow">这是使用v-if的标签</p> <!--p不显示-->
<p v-else>这是使用v-else的p标签</p> <!--p显示-->
<p v-show="isshow">这是使用v-show的标签</p> <!--p不显示-->
<p v-if="code=='a'">a</p>
<p v-else-if="code=='b'">b</p>
<p v-else-if="code=='c'">c</p>
<p v-else>not a/b/c</p> <!--显示not a/b/c-->
</p>
<script>
var vm = new vue({
el:'#app',
data:{
isshow:false,
code:'d'
}
})
</script>
</body>
注意点：
1. v-if = false,元素直接销毁，html结构里面不再存在这个元素
2. v-show=false:元素的display样式被设置为none，被隐藏起来，未被销毁
3. 所以v-show 的性能高于v-if