vue基础语法之分支循环结构

最新推荐文章于 2023-05-20 17:40:32 发布

我今年六岁

最新推荐文章于 2023-05-20 17:40:32 发布

阅读量450

点赞数

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/poppy995/article/details/98170776

前端笔记专栏收录该内容

56 篇文章

订阅专栏

本文深入探讨Vue.js中v-if、v-show、v-for等指令的使用技巧，解析它们在分支与循环结构中的作用及区别，通过实例展示如何高效地进行数据遍历和条件渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分支循环结构

分支结构

v-if
v-eles
v-eles-if
v-show false 隐藏 true显示

v-if和v-show的区别

`v-if`控制元素是否渲染到页面

v-show控制元素是否显示(已经渲染了页面)
v-if适用于操作不是很多的情况隐藏就是把这个元素删除掉(removeChild)
v-show 频繁操作隐藏就是display:none

循环结构

循环结构遍历数组

v-for遍历数组(数组里面的值可以是对象  需要值就点出来)

    <li v-for='item in list'>{{item}}</li>
    <li v-for='(item,index) in list'>{{item}}+'----'{{index}}</li>

item每项的数据
index每项的索引

key的作用：
帮助Vue区分不同的元素，从而提高性能

  <li :key='item.id' v-for='(item,index) in list'>{{item}}+'----'{{index}}</li>

key的值是唯一的这样方便vue区分DOM元素对我们开发者基本没什么影响

循环结构遍历对象

v-for遍历对象

  <li v-for='(value,key,index) in list'>{{item}}+'----'{{index}}</li>

value:数据的值
key:键数据的名字
index:索引
顺序是固定的

v-for和v-if结合使用

  <li v-if='value==12' v-for='(value,key,index) in list'>{{item}}+'----'{{index}}</li>'

如果if内的条件是对象中的值 name只有符合这一个条件的数据才能显示出来
代码示例

<body>
  <div id="app">
    <ul>
      <li v-for='item in dataArr'>{{item}}</li>
      <li v-for='(item,index) in dataArr'>{{item}}----{{index}}</li>
      <li :key='item.id' v-if='item.age>15' v-for='item in dataObjArr'>{{item.name}}----{{item.age}}</li>
    </ul>
    <ol>
      <li v-for='(value,key,index) in dataObj'>{{value}}---{{key}}---{{index}}</lis>
    </ol>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        dataArr: [
          'q', 'w', 'e', 'r'
        ],
        dataObjArr: [
          {
            id: 1,
            name: 'zhangsan',
            age: 15
          },
          {
            id: 2,
            name: 'lisi',
            age: 16
          },
          {
            id: 3,
            name: 'wanwu',
            age: 20
          }
        ],
        dataObj: {
          name: '112233',
          age: '6666'
        }
      }
    })
  </script>
</body>