vue数据调取怎么渲染列表_(六)Vue的列表渲染及组件渲染

Vue的列表渲染

注：其实使用的还是相关的vue的指令进行相应的数据绑定和渲染 在前边写过一个博客来说指令的相关内容但是写的不细，就是写了相应的使用方法，在此要提到之前遇到的一个问题 就是前端拿到返回数据进行数据渲染·列表展示的时候，之前就是直接解析出数组直接在DOM上边写一个v-for 进行数据渲染达到数据展示的效果，但是其实这样是不合适的 ，vue的初衷就是使用单页面应用，更多的使用js来完成更多的功能 所以尽量让相应的耦合度低一些，创建一个组件，将数据配置好，js渲染完成之后直接扔上去 显示出来 这样就是没有直接在DOM上进行操作，想想是不是这个道理

(一)列表渲染

1.1使用v-for把一个数组对应为一组元素

• { { item.message }}

data() {

return{

items: [

{ message: 'Foo' },

{ message: 'Bar' }

]

}

}

1.2 在V-for中，可以直接访问所有的父作用区域的值 举例表示 同时在渲染是显示索引数值

Such as：

• { { parentMessage }} - { { index }} - { { item.message }}

data(){

return{

parentMessage: 'Parent',