HBuilder X 中Vue.js基础使用2（三）
一、条件渲染
1、条件判断
v-if ：表达式返回真值时才被渲染
v-else ：表达式返回为假时不被渲染
2、 分支条件判断
v-else-if：使用v-if , v-else-if 和 v-else 来表示其他的条件分支
3、显示隐藏
v-show
v-show == true 把节点显示
v-show == false 把节点隐藏(display:none)按条件显示元素 v-show 用法和v-if 基本相同
v-if和v-show 区别
相同之处：
- 都可以用于根据条件动态显示或隐藏页面元素。
- 都是Vue框架提供的指令，用于简化条件渲染的操作。
- 都可以通过条件表达式来确定元素是否显示，提供了灵活性和控制性。
不同之处：
- 触发时机：v-if是惰性的，只有在条件为真时才会渲染对应的元素；而v-show在初始化时即渲染了所有元素，只是在条件为假时将元素的display属性设为none。
- 性能开销：由于v-if是惰性的，条件为假时对应的元素不会被渲染，因此在条件变化频繁时，v-if具有更好的性能表现；而v-show虽然会一直渲染元素，但只是通过修改display属性来切换元素的显示与隐藏，不会造成重新渲染。
- 编译过程：v-if在条件为假时，对应的元素不存在于DOM结构中，需要重新编译和渲染；而v-show在条件为假时，元素始终存在于DOM结构中，只是通过样式控制其显示与隐藏，不会触发重新编译。
- 用法场景：一般来说，对于需要频繁切换显示状态的元素，使用v-show会比较适合；而对于需要根据条件动态添加或移除元素的场景，使用v-if更为合适。
4、循环
v-for的基本格式是 "item in 数组"，语法 ：每一项 in 数组
- 数组通常是来自data或者prop，也可以是其他方式；
- item是我们给每项元素起的一个别名，这个别名可以自定来定义；
- 如果需要索引，可以使用格式： "(item, index) in 数组"；
v-for也支持遍历对象，语法：(值 键名 下标 ) in 对象
并且支持有如下参数：
- 一个参数： "value in object";
- 二个参数： "(value, key) in object";
- 三个参数： "(value, key, index) in object";
<script setup>
import {ref} from 'vue'
const flag=ref(true)
const score=ref(60)
const isShow=ref(true)
const majors = ['java', 'mysql', 'oracle', 'python', 'linux']
import { reactive } from 'vue';
//定义对象
const datas=reactive({
name:'张三',
age:18,
gender:'男',
tel:'120'
})
</script>
<template>
<div>
<button @click="flag=!flag">单击我</button>
<h2 v-if="flag">我</h2>
<h2 v-else>其他</h2>
<hr/>
<p>
<input type="text" v-model="score"/>
<div v-if="score>=90 && score<=100">优秀</div>
<div v-else-if="score>=80 && score<90">良好</div>
<div v-else-if="score>=70 && score<80">中等</div>
<div v-else-if="score>=60 && score<70">一般</div>
<div v-else>不及格</div>
</p>
<h3 v-show="isShow">我会隐身</h3>
<button @click="isShow=!isShow">显示/隐藏</button>
<p>
<ul>
<!-- 遍历数组 -->
<li v-for="item in majors" >{{item}}</li>
</ul>
<ul>
<!-- 遍历数字 -->
<li v-for="(num,index) in 5" >{{index}}-{{num}}</li>
</ul>
<ul>
<!-- 遍历对象 -->
<li v-for="(value,key,index) in datas" >{{index}}->{{key}}->{{value}}</li>
</ul>
</p>
</div>
</template>
<style>
li{
text-align: left;
padding: 15px 5px;
font-size: larger;
}
</style>
v-if 和 v-for注意要点：
1、当二者同时存在时，v-if会先执行
2、当v-if和v-for同时存在于同一个元素上时，Vue会根据官方文档的建议发出警告。原因是v-for的优先级比v-if更高，这意味着v-for会先被解析，然后再解析v-if。这可能会导致不必要的性能开销，因为v-if会在每次迭代时都被执行，而不是在条件为真时执行。
3、在这种情况下，建议的最佳做法是将v-if移动到包裹元素上，而不是直接放在带有v-for的元素上。这样可以确保v-if只会在条件为真时才会被执行，而不会在每次迭代时都被执行，从而提高性能并避免潜在的错误。
最好避免在同一个元素上同时使用v-if和v-for，以确保代码的可读性和性能
使用template来对多个元素进行包裹，而不是使用div来完成；
