Vue:v-for的使用,列表的循环,对象的循环,数据改变,set的使用
2020-01-14 03:19
363 查看
v-for循环列表
其中item为内容,index为下标
注意这里的key为唯一值,尽量不使用index
<div id="app"> <div v-for="(item, index) of list" :key="item.id"> {{item.text}} ---- {{index}} </div> </div> <script> var app = new Vue({ el:"#app", data:{ list: [ { id:"0001", text:"min" }, { id:"0002", text:"box" }, { id:"0003", text:"xiaode" }] }, }) </script>
效果
若想改变数组中的内容不能直接通过改变下标的方式,这样数组中的内容虽然改变了,但是页面中的内容不会跟着改变,这个时候应该使用vue提供的一些方法 push pop shift unshift splic sort reverse,或者通过改变list的引用,和set方法
使用template占位符进行多个循环这样外层的div块就不会显示出来
html
<div id="app"> <template v-for="(item, index) of list" :key="item.id"> <div > {{item.text}} ---- {{index}} </div> <span> {{item.text}} </span> </template> </div>
v-for循环对象
其中item为值,key键,index为下标
<div id="app"> <div v-for="(item, key, index) of userInfo"> {{item}} --- {{key}} --- {{index}} </div> </div> <script> //push pop shift unshift splic sort reverse var app = new Vue({ el:"#app", data:{ userInfo:{ name:"Min", age: 18, gender: "boy", } }, }) </script>
若要通过命令的方式直接修改对象中的值,这样页面不会随之而改变,可以修改该对象的引用,或者使用vue的set方法
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 使用Vue中 v-for循环列表控制按钮隐藏显示功能
- vue v-for循环数据列表,获取列表当前项的某一项的数据,例如id
- Vue改变(或增加)数组或对象中的数据---set()
- Vue学习(v-for的使用以及普通数据排序、数组对象排序)
- vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
- 使用Vue中 v-for循环列表,控制按钮隐藏显示
- vue.js中请求数据v-for循环使用数据
- 取出json中[{},{}] 的数据 ,使用 for-in 来循环对象的属性
- for循环在列表中的使用
- 使用客户端对象模型读取SharePoint列表数据
- 关于for循环中引用同一个对象,列如map,导致添加的数据永远是最后一个
- 使用<s:iterator>标签来循环遍历某一实体下的set集合数据
- 使用ActiveReport for .net 进行报表开发(三)--显示对象集合中的数据
- JavaScript中push()两层循环数据及多层,vue用iview(2.0+)UI 组件库时,制作级联全国地址下拉列表
- vue中数据绑定了一个对象/数组,然后改变对象里的属性值,实现不了双向绑定
- 使用客户端对象模型读取SharePoint列表数据
- vue中使用watch函数,当数据改变时自动引发事件
- v-for循环渲染列表时,怎么直接把从对象取出的值赋值给class属性
- vue替换data里面for渲染的列表或者是循环以及替换数组的内容
- vue给对象新添加属性,一定要使用Vue.set( target, key, value )这个API来添加