（三）Vue - 基本指令之v-for、v-if和v-show

最新推荐文章于 2023-03-20 13:21:44 发布

tiano_天道酬勤

最新推荐文章于 2023-03-20 13:21:44 发布

阅读量651

点赞数

分类专栏： vue 文章标签： vue javascript vue.js reactjs html5

本文链接：https://blog.csdn.net/qq_33810743/article/details/106892892

版权

本文介绍了Vue中的基本指令，包括v-for用于遍历数组和对象，强调2.2.0+版本在组件中使用v-for需携带key属性。接着讨论了v-if和v-show的区别，v-if在初始化时性能更高，而v-show在频繁切换显示隐藏时更优。最后提到了v-else和v-else-if的配合使用，作为v-if的补充条件。

摘要由CSDN通过智能技术生成

（三）Vue - 基本指令之v-for、v-if和v-show

指令：v-for

for循环，可遍历普通数组、对象数组、对象和数字；
说千遍道万遍不如直接上代码：

<body>
  <div id="app">
  <h4>遍历普通数组</h4>
    <!-- list1: [1, 2, 3, 4, 5, 6] -->
    <p v-for="(item, i) in list1">索引值：{
   {
   i}}  --- item项目：{
   {
   item}}</p>

    <h4>遍历对象数组</h4>
    <!-- list2: [{
    id: 1, name: '张三' },{
    id: 2, name: '李四' }