v-for和key的作用 v-show和v-if作用和区别

神生漫长♚

于 2024-07-17 23:14:03 发布

阅读量525

点赞数 17

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_63873040/article/details/140508001

版权

v-for和key的作用 v-show和v-if作用和区别

1.v-for

v-for 必须搭配 :key
1. v-key必须是数字和字符串
2. v-key必须是唯一值
3. 提高重排效率就地复用 (diff算法)
v-fot可以遍历数字，遍历对象，遍历数组

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app">
    <div v-for="item in list">{{item}}</div>
    <!-- v-for 遍历数字 -->
    <div v-for="num in 10">{{num}}</div>
    <!-- 遍历对象 -->
    <div v-for="(key,value,index) in obj">{{value}} === {{key}} ===={{index}}</div>
    <!-- 遍历数组 -->
    <div v-for="(item,index) in list">{{item}} == {{index}}</div>
    <div v-for="item in list1" :key="item.id">{{item.title}}</div>
    <!-- 遍历数组对象 -->
    <div v-for="item in list1">{{item.title}}
      <div v-for="itemPage in item.set" :v-key="item.id">
        {{itemPage.settionName}}
      </div>
    </div>
    <!-- v-for 必须搭配 v-key : 
     1. v-key必须是数字和字符串 
     2. v-key必须是唯一值
     3. 提高重排效率 就地复用 (diff算法)
     -->
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3, 4, 5],
      obj: {
        name: 'wangqian',
        age: 20
      },
      list1: [{
        id: 0,
        title: 'title',
        set: [{
          id: 0,
          settionName: "day01"
        },
        {
          id: 1,
          settionName: "day02"
        },
        {
          id: 2,
          settionName: "day03"
        },
        {
          id: 3,
          settionName: "day04"
        },
        ]

      },
      {
        id: 1,
        title: 'title1',
        set: [{
          id: 0,
          settionName: "day01"
        },
        {
          id: 1,
          settionName: "day02"
        },
        {
          id: 2,
          settionName: "day03"
        },
        {
          id: 3,
          settionName: "day04"
        },
        ]
      },
      {
        id: 2,
        title: 'title2',
        set: [{
          id: 0,
          settionName: "day01"
        },
        {
          id: 1,
          settionName: "day02"
        },
        {
          id: 2,
          settionName: "day03"
        },
        {
          id: 3,
          settionName: "day04"
        },
        ]
      },
      {
        id: 3,
        title: 'title3',
        set: [{
          id: 0,
          settionName: "day01"
        },
        {
          id: 1,
          settionName: "day02"
        },
        {
          id: 2,
          settionName: "day03"
        },
        {
          id: 3,
          settionName: "day04"
        },
        ]
      }]
    },
    methods: {}
  })
</script>

</html>

2. v-show和v-if作用和区别

区别:
相同点:显示和隐藏元素
实现方式不同:
不同点:
1.v-if通过删除dom元素来实现
2.v-show是设置display:none来

实现应用场景不同:
1.只修改一次的时候可以使用v-if
2.频繁切换的时候可以使用v-show

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../day01/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-if和v-show 
            相同点：显示和隐藏元素
            不同点：v-if删除DOM元素，v-show是通过display：none,进行隐藏。
            应用场景：只修改一次的时候可以使用v-if，频繁切换的时候可以使用v-show
        -->
        <div v-if="flag">1</div>
        <div v-show="flag">2</div>

        <div v-if="flag">3</div>
        <div v-else>4</div>

        <div v-if></div>
        <div v-else-if></div>
        <div v-else></div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>

</html>