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