一、条件渲染
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来完成；
