前端最新Vue2+Vue3基础入门到实战项目9-10

009-指令-v-show 和 v-if

---

1、v-show

（1）作用：控制元素显示隐藏

（2）语法：v-show="表达式" 表达式值 true 显示，false 隐藏

（3）原理：切换 display:none 控制显示隐藏

（4）场景：频繁切换显示隐藏的场景

2、v-if

（1）作用：控制元素显示隐藏（条件渲染）

（2）语法：v-if="表达式"  表达式值 true 显示，false隐藏

（3）原理：基于条件判断，是否 创建 或 移除 元素节点

（4）场景：要么显示，要么隐藏，不频繁切换的场景

010-指令 v-else v-else-if

1、作用：辅助 v-if 进行判断渲染

2、语法：v-else      v-else-if=表达式

3、注意：需要紧挨着 v-if 一起使用

<template><div id="app"><div v-html="msg"></div><h1>009-指令v-show 和 v-if</h1><div v-show="flag">我是 v-show </div><div v-if="flag">我是 v-if </div><h1>010-指令v-else 和 v-else-if</h1><p v-if="gender === 1">性别：男</p><p v-else>性别：女</p><hr><p v-if="score >= 90">成绩评定A: 奖励电脑一台</p><p v-else-if="score >= 70">成绩评定B: 奖励电脑二台</p><p v-else-if="score >= 60">成绩评定C: 奖励电脑三台</p><p v-else>成绩评定D: 奖励电脑四台</p></div>
</template>
<script>export default {data(){return {msg: '<a href="#">黑马程序员></a>',flag: false,gender: 1,score:80,}},methods: {},mounted() {}
}
</script><style></style>