经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue中对数组和对象进行遍历和修改方式
来源:jb51  时间:2022/8/23 11:26:55  对本文有异议

对数组和对象进行遍历和修改

1、对数组进行循环

v-for进行循环,有两个参数(item,index)

注意:template可以成为占位符,在DOM里面不显示

2、 修改数组的时候,不能直接通过下标去增加修改删除

(1)可以用过push/pop/shift/unshift/splice/sort/reverse方法

(2)也可以直接改变(重新定义)list数组的整体 (var list = [ ])

(3)全局的Vue.set(app7.list,1<此处代表下标>,2)

局部的app7.$set(app7.list,1<此处代表下标>,2)

3、对对象进行循环

v-for进行循环,有三个参数(item,index,key)

4、增加对象的时候

(1)通过重新定义引用的对象 (var obj = { })

(2)set方法 全局的Vue.set(app7.obj,“sex”<此处代表要增加的属性>,“女”)

局部的app7.$set(app7.obj,“sex”<此处代表要增加的属性>,“女”) 

  1. <!-- v-for的使用 -->
  2. <div id="app7">
  3. // 对数组进行循环
  4. <template v-for="(item,index) of list" :key="item.id">
  5. <div>
  6. {{item.text}} ---- {{index}}
  7. </div>
  8. <span>
  9. {{item.text}} ---- {{index}}
  10. </span>
  11. </template>
  12. //对对象进行循环
  13. <template v-for="(item,index,key) of obj">
  14. <div>
  15. {{item}} ---- {{index}}-----{{key}}
  16. </div>
  17. </template>
  18. </div>
  1. <script>
  2. var app7 = new Vue({
  3. el: '#app7',
  4. data: {
  5. list: [
  6. {
  7. id: "1",
  8. text: '1'
  9. },
  10. {
  11. id: "2",
  12. text: '2'
  13. },
  14. {
  15. id: "3",
  16. text: '3'
  17. },
  18. ],
  19. obj: {
  20. name: 'mao',
  21. age: 28,
  22. address: 'liulin'
  23. }
  24. }
  25. })
  26. </script>

修改数组和对象的特殊情况以及修改方法

div部分

  1. ? <div id="root">
  2. ? ? {{title}}
  3. ? ? <my-header></my-header>
  4. ? ? {{list}}
  5. ? ? {{obj}}
  6. ? </div>
  7. ? <div id="app">
  8. ? ? {{title}}
  9. ? </div>

script部分

  1. ? <script>
  2. ? ? // 全局定义的组件
  3. ? ? Vue.component('my-header', {
  4. ? ? ? template: `
  5. ? ? ? ? <header>title</header>
  6. ? ? ? `
  7. ? ? })
  8. ? ? // 实例化Vue
  9. ? ? var vm = new Vue({
  10. ? ? ? el: '#root',
  11. ? ? ? data: {
  12. ? ? ? ? title: 'hello',
  13. ? ? ? ? list: ['a', 'b'],
  14. ? ? ? ? obj: {
  15. ? ? ? ? ? x: 0
  16. ? ? ? ? }
  17. ? ? ? }
  18. ? ? })
  19. ? ? var vm2 = new Vue({
  20. ? ? ? el: '#app',
  21. ? ? ? data: {
  22. ? ? ? ? title: 'world'
  23. ? ? ? }
  24. ? ? })
  25. ? </script>

修改数组的两个特殊情况

1.arr.length = 0, 不具备响应特性

2.arr[0] = 100, 不具备响应特性

  • 修改对象的特殊情况
  • 添加obj.x,x属性,也不具备响应特性

修补方法

  1. vm.$set(target, propertyName/index, value)//实例化一个vue,试用贴set属性改变对应的value值
  2. Vue.set(target, propertyName/index, value)//直接使用vue的属性,要与实例化vue方法区分,这个没有$
  3. vm.$forceupdate()

以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号