vue长列表渲染_vue 二维数组渲染

vue长列表渲染_vue 二维数组渲染循环在模板中可以用v-for指令来循环数组,对象等。循环数组我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用iteminitems形式的特殊语法,其中it

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

循环

在模板中可以用v-for指令来循环数组,对象等。
 

循环数组

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。

<div id="app">
<ul>
  <li v-for="item in items">{{item.message}}</li>
</ul>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      items: [
        {message: 'Hello'},
        {message: 'World'},
      ]
    }
  })
</script>

结果:

Hello
World

 
v-for 还支持一个可选的第二个参数,即当前项的索引。

<div id="app">
<ul>
  <li v-for="(item, index) in items">{{index+1}}.{{item.message}}</li>
</ul>
</div>

注意:索引index是放在item之后
结果:

1.Hello
2.World

你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:

<div v-for="item of items"></div>

 

循环对象

循环对象跟循环数组是一样的。并且都可以在循环的时候使用接收多个参数。示例代码如下:

<div id="app">
    <div v-for="value in person">
        {{value}}
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            person: {
                "username": "甲壳虫",
                "age": 18,
                "homepage": "https://www.cnblogs.com/jiakecong/"
            }
        }
    });
</script>

结果:

甲壳虫
18
https://www.cnblogs.com/jiakecong/

你也可以提供第二个的参数为 property 名称 (也就是键名):

<div v-for="(value, key) in person">
  {{key}}:{{value}}
</div>

结果:

username:甲壳虫
age:18
homepage:https://www.baidu.com/

还可以用第三个参数作为索引:

<div v-for="(value, key, index) in person">
  {{index}}.{{key}}:{{value}}
</div>

结果:

0.username:甲壳虫
1.age:18
2.homepage:https://www.baidu.com/

 

保持状态:

循环出来的元素,如果没有使用key元素来唯一标识,如果后期的数据发生了更改,默认是会重用的,并且元素的顺序不会跟着数据的顺序更改而更改。比如:

<div id="app">
  <div v-for="book in books">
    <label for="book">{{book}}</label>
    <input type="text" :placeholder="book">
  </div>
  <button @click="changeBooks">更换图书</button>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      books: ['三国演义','水浒传','红楼梦','西游记']
    },
    methods: {
      changeBooks: function(event){
        this.books.sort((x,y) => {
          return 5 - parseInt(Math.random()*10)
        });
      }
    }
  });
</script>

我们会发现,如果我们在input标签中输入了值,然后点击更换图书,你会发现即使数据更改了,input并不会跟着数据的更改而更改
vue长列表渲染_vue 二维数组渲染
这时候我们只需要在v-for的时候加上一个key属性就可以了。示例代码如下:

<div v-for="(book,index) in books" v-bind:key="book">
    <label for="book">{{book}}</label>
    <input type="text" v-bind:placeholder="book">
</div>

vue长列表渲染_vue 二维数组渲染
注意,key只能是整形,或者是字符串类型,不能为数组或者对象。
 

触发视图更新:

Vue对一些方法进行了包装和变异,以后数组通过这些方法进行数组更新,会出发视图的更新。这些方法如下:

1.push():添加元素的方法。

this.books.push("甲壳虫")

2.pop():删除数组最后一个元素。

 this.books.pop()

3.shift():删除数组的第一个元素

this.books.shift()

4.unshift(item):在数组的开头位置添加一个元素

this.books.unshift("甲壳虫")

5.splice(start: number, deleteCount: number, ...items: T[]):向数组中添加或者删除或者替换元素

  • start参数代表从第几个下标开始
  • deleteCount代表删除几个数,可以为0代表不删
  • items代表增加的对象
 // 向books第0个位置添加元素
 this.books.splice(0,0,"甲壳虫")
 // 下标从0开始,删除2个元素
 this.books.splice(0,2)
 // 下标从0开始,替换2个元素
 this.books.splice(0,2,'甲壳虫','aaaa')

 

6.sort(function):排序

 this.books.sort(function(x,y){
     // 取两个随机数排序
     a = Math.random();
     b = Math.random();
     return a-b;
 });

7.reverse():将数组元素进行反转

this.books.reverse();

还有一些Vue没有包装的方法,比如filterconcatslice,如果使用这些方法修改了数组,那么只能把修改后的结果重新赋值给原来的数组才能生效。比如:

this.books = this.books.filter(function(x){
    return x.length>3?false:true;
})

 

视图更新注意事项

1.直接修改数组中的某个值是不会出发视图更新的。比如:

this.books[0] = '甲壳虫';

这种情况应该改成用splice或者是用Vue.set方法来实现:

Vue.set(this.books,0,'甲壳虫');

2.如果动态的给对象添加属性,也不会触发视图更新。只能通过Vue.set来添加。比如:

<div id="app">
<ul>
  <li v-for="(value,name) in person" @click="changePerson">{{name}}:{{value}}</li>
</ul>
</div>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      person: {"username": '甲壳虫'}
    },
    methods: {
      changePerson: function(event){
        // 直接修改this.person.age是没有效果的
        // this.person.age = 18;
        Vue.set(this.person,'age',18)
      }
    }
  });
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165399.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • C++学习——动态内存分配「建议收藏」

    C++学习——动态内存分配「建议收藏」文章目录何为静态内存分配?为什么需要动态内存分配解决方法:动态内存分配动态申请内存操作符 newnew 类型名T(初始化参数列表)释放内存操作符deletedelete 指针名p注意问题内存泄露举例申请和释放动态数组动态创建多维数组何为静态内存分配?通常定义变量(或对象),编译器在编译时可以根据该变量(或对象)的类型知道所需内存空间的大小,从而系统在适当的时候事先为他们分配确定的存储空间。这种…

  • 图形验证码安全

    图形验证码安全目录图形验证码图形验证码的作用和原理图形验证码的分类图形验证码的验证过程图形验证码的安全问题静态图形验证码的激活成功教程利用Python脚本激活成功教程静态图形验证码图形验证码我们经常在登录app或者网页的时候,都会需要我们输入图形验证码上的内容,以验证登录。有些是纯数字的图形验证码,有些是字母和数字,有些是图案,有些是数学表达式……不同的网站,采用的图形验证码的形式也…

  • DLL注入

    DLL注入DLL注入DLL注入原理dll注入实现过程功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入DLL注入原理在Windows操作系统中,运行的每一个进程都生活在自己的程序空间中(保护模式),每一个进程都认为自己拥有整个机器的控制权,

  • glassfish是什么_glasses of

    glassfish是什么_glasses of一:安装下载:    必须预先安装Jdk,并且设置JAVA_HOME环境变量。从官网下载GlassFish,是一个jar文件。下载后运行:F:\>java-Xmx256m-jarglassfish-installer-v2ur2-b04-windows.jar如果这里不加上-Xmx256m,很有可能会报OutOfMemoryException。这个命令会产生一个名为glassf

  • 《MySQL必懂系列》全局锁、表级锁、行锁

    《MySQL必懂系列》全局锁、表级锁、行锁

  • ARM开发环境搭建

    ARM开发环境搭建1.下载E:\ARM开发\工具软件\ARM裸机开发工具\Yagarto工具包路径下两个程序2.下载E:\ARM开发\工具软件\USB转串口驱动\CH3403.下载E:\ARM开发\工具软件\ARM裸机开发工具\JRE4.打开设备管理器->右键->更新5.6.选择E:\ARM开发\工具软件\ARM裸机开发工具\DRIVER目录下的(注意:此操作win7环境下,win7以上还要有点其他步骤)选择好就点你下一步7.出现红色弹窗点8.完成9.在E:\ARM开发\工具

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号