v-show与v-for

最新推荐文章于 2023-07-16 17:40:08 发布

jwz934738949

最新推荐文章于 2023-07-16 17:40:08 发布

阅读量1.9k

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/107143037

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

v-show:

v-if与v-show都可以表示条件判断；当条件为false时，v-if所修饰的元素直接在DOM中消失，而v-show修饰的元素只是添加了display:none的样式

v-for:

表示循环的命令，可以对数组以及对象进行循环遍历，获取到数组以及对象相应的属性。

①在v-for中循环数组
1.只显示数组内容：v-for="item in 数组"
2.显示数组内容与数组下标：v-for="(item, index) in 数组"

②在v-for中循环对象
1.直接循环对象本身，会默认循环对象中的每一个value v-for="item in 对象"
2.循环key-value v-for="(value, key) in 对象"

但是，当想在显示的页面中插入一条数据时，v-for默认会将后面的数据依次向后移动一位，然后在插入该条数据，这种方法加大了处理数据的难度。

使用绑定key的方法来进行优化，将item进行绑定之后，若插入新的数据的话，浏览器会对页面中绑定key值的数据进行一一对应，新建一个空间用来插入新的数据，提高了处理速度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-show与v-for</title>
</head>
<body>
<div id="app">
  <!--
  v-if与v-show都可以表示条件判断；
  当条件为false时，v-if所修饰的元素直接在DOM中消失，而v-show修饰的元素只是添加了display:none的样式
  -->
  <!--    <h2 v-if="flag">显示内容</h2>-->
  <!--    <h2 v-show="flag">显示内容</h2>-->
  <ul>
    <!--
    在v-for中循环数组
      1.只显示数组内容：v-for="item in 数组"
      2.显示数组内容与数组下标：v-for="(item, index) in 数组"
      3.添加绑定key来向数组中插入数据并在页面中显示出来
    -->
    <!--    <li v-for="item in foods" :key="item">{{item}}</li>-->
    <!--    <li v-for="(item, index) in foods">{{index+1}} {{item}}</li>-->
    <!--
      在v-for中循环对象
        1.直接循环对象本身，会默认循环对象中的每一个value v-for="item in 对象"
        2.循环key-value v-for="(value, key) in 对象"
    -->
    <li :key="item" v-for="item in people">{{item}}</li>
    <br>
    <br>
    <li v-for="(value, key) in people">{{key}}: {{value}}</li>
    <br>
    <br>
    <li v-for="(value, key, index) in people">{{index+1}}-{{key}}: {{value}}</li>
  </ul>
</div>
<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      flag: true,
      foods: ["面条", "米饭", "馅饼", "汤"],
      people: {
        name: "John",
        age: 20,
        gender: "男",
        height: 180
      }
    }
  })
</script>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-show与v-for

v-show:v-if与v-show都可以表示条件判断；当条件为false时，v-if所修饰的元素直接在DOM中消失，而v-for修饰的元素只是添加了display:none的样式v-for:表示循环的命令，可以对数组以及对象进行循环遍历，获取到数组以及对象相应的属性。①在v-for中循环数组 1.只显示数组内容：v-for="item in 数组" 2.显示数组内容与数组下标：v-for="(item, index) in 数组"②在v-for中循环对象 1.直接循环...
复制链接

扫一扫