本文共 1015 字，大约阅读时间需要 3 分钟。

6、列表渲染

v-for：列表循环指令

   
   
    
    
{
  { n }} 
   
   
    
        
    
{
  { n }} - {
  { index }} 
   

例2：遍历数组，使用计算属性

data: {    numbers: [1, 2, 3, 4, 5]}

   
   
    
    
{
  { n }}
   
   
    
    
{
  { n }}
   
computed：计算属性，和data定义在同一级别 // 计算属性：这里的数据是通过某种方式计算出来的computed: {    evenNumbers() {        console.log('计算属性 evenNumbers')        // filter：遍历numbers，并返回满足条件的值，放在一个数组中        return this.numbers.filter(function (number) {            return number % 2 === 0        })    }}

例3：遍历数据列表

data: {    userList: [        { id: 1, username: 'helen', age: 18 },        { id: 2, username: 'peter', age: 28 },        { id: 3, username: 'andy', age: 38 }    ]}

   
   
                
     
              
{
  {index}}
              
{
  {item.id}}
              
{
  {item.username}}
              
{
  {item.age}}
         
    
   

例4：遍历对象

data: {    user:{        id: 1,        username: 'helen',        age: 18    }} 
   
   
   
    
    
id：
    
    
用户名：
    
    
年龄：
   
   
   
    
        
    
        {
  {index}}-{
  {key}}：    
   

转载地址：http://nyzki.baihongyu.com/