(十九)v-if,v-else-if,v-else和v-show區別
阿新 • • 發佈：2022-03-30
區別:
v-if,v-else-if,v-else相當於DOM元素的新增刪除
v-show控制元素的渲染，顯示或者不顯示
v-show的效能開銷小
寫法shangv-if更簡單,但是效能開銷上v-show更小一些
實現程式碼:
<template>
<h1>666</h1>
<div>
<div v-if="no>=5">ce1</div>
<div v-else>ce2</div>
<div>ce3</div>
<br/>
等級
<div v-if="cj>=90">一級</div>
<div v-else-if="cj>80">二級</div>
<div v-else-if="cj>70">三級</div>
<div v-else>四級</div>
<br/>
等級show
<div v-show="cj>=90">一級</div>
<div v-show="cj<90 & cj>=80">二級</div>
<div v-show="cj<80& cj>=70">三級</div>
<div v-show="cj<70">四級</div>
</div>
</template>
<script>
export default {
name: "AppA6",
data() {
return {
no:5,
cj:80
};
},
components: {
},
methods: {},
mounted() {},
};
</script>
<style> </style>