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

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

tiano_天道酬勤

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

阅读量635

点赞数

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

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

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

（三）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: '李四' }] -->
    <p v-for="(user, i) in list2">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>

    <h4>遍历对象</h4>
    <!-- user: {id: 1,name: '张三',gender: '男'} -->
    <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
    <p v-for="(value, key, i) in user">值是： {{ value }} --- 键是： {{key}} -- 索引： {{i}}</p>

    <h4>遍历数字</h4>
    <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
    <p v-for="count in 3">循环：{{ count }} 次循环</p>
  </div>

  <script>
    // 创建 Vue 实例
    var vm = new Vue({
      el: '#app',
      data: {
        list1: [1, 2, 3],
        list2: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' }
        ],
        user: {id: 1,name: '张三',gender: '男'}
      },
      methods: {}
    });
  </script>
</body>

先看代码再看效果图：

注意：2.2.0+ 的版本里，当在组件中使用 v-for 时，必须要携带key属性。

v-for 循环的时候，key 属性只能使用 number获取string
key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值

不管是再react还是Vue，循环都需要携带key属性，具体原因各位看官可详细查阅相关资料

指令：v-if 和v-show

v-if和v-show指令的作用是类似的，但是又存在部分差异，正所谓存在即合理。

先看下用法：

   <h3 v-if="flag">我是v-if控制的元素</h3>
   <h3 v-show="flag">我是v-show控制的元素</h3>

效果均能通过flag的值来控制h3标签的显示隐藏

区别：

v-if 每次都会重新删除或创建元素
v-show 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
相比下如果v-if初始化性能较高，但是隐藏显示切换性能较差，v-show相反；所以当元素初始化时候就决定了后续不在改变的显示隐藏状态情况下使用v-if较好，需要频繁切换隐藏显示状态则使用v-show

指令：v-else 和v-else-if

可以用v-else-if 添加一个 “else if” 块
可以用 v-else 指令给 v-if 添加一个 “else” 块
这2个指令较为简单，需要组合v-if来使用：


<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

tiano_天道酬勤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（三）Vue - 基本指令之v-for、v-if和v-show

（三）Vue - 基本指令之v-for、v-if和v-show指令：v-for指令：v-if 和v-show指令：v-else 和v-else-if指令：v-forfor循环，可遍历普通数组、对象数组、对象和数字；说千遍道万遍不如直接上代码：<body> <div id="app"> <h4>遍历普通数组</h4>  <p v-for="(it
复制链接

扫一扫