vue 列表渲染 v-for

1.数组列表 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引

1.1 普通渲染 v-for="item in items" / v-for="item of items" /

v-for="item of items":key="item" key 提升性能

v-for="(item,index) of items":key="index" index 消除同名 key 风险（排序问题）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <ul id="example-1">
    <li v-for="item in items">
      {{ item.message }}
    </li>
  </ul>

  <script src="vue.js"></script>

  <script>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [{
            message: 'Foo'
          },
          {
            message: 'Bar'
          }
        ]
      }
    })
  </script>



</body>

</html>

View Code

1.1.1 简单 todolist 小实例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="inputVal" />
        <button @click="addList">add</button>
        <ul>
            <li v-for="(item,index) of items":key="index">{{item}}</li>
        </ul>
    </div>
    <script src="js/js.js"></script>

</body>
</html>

View Code

var app=new Vue({
    el:'#app',
    // template:'<h1>hello {{mes}}</h1>',
    data:{
        inputVal:'',
        items:[]
    },
    methods:{
        addList:function(){
            this.items.push(this.inputVal);
            this.inputVal='';
        }
    }
});

View Code

1.1.2 todo-list 组件化

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="inputVal" />
        <button @click="addList">add</button>
        <ul>
            <todo-list             
            v-for="(item,index) of items":key="index"
            :content="item"
            ></todo-list>
            <!-- <li v-for="(item,index) of items":key="index">{{item}}</li> -->
        </ul>
    </div>
    <script src="js/js.js"></script>

</body>
</html>

View Code

// global component
// Vue.component('todo-list',
// {
//     props:['content'],
//     template:'<li>{{content}}</li>'}
// );

// local
var TodoItem={
    props:['content'], 
    template:'<li>{{content}}</li>'
};
var app=new Vue({
    el:'#app',
    components:{              
        'todo-list':TodoItem
    },
    data:{
        inputVal:'',
        items:[]
    },
    methods:{
        addList:function(){
            this.items.push(this.inputVal);
            this.inputVal='';
        }
    }
});

View Code

1.1.3 todo-list 父子组件之间传递参数、处理程序、发布 - 订阅模式

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input v-model="inputVal" />
        <button @click="addList">add</button>
        <ul>
            <todo-list             
            v-for="(item,index) of items":key="index"
            :content="item"
            :index="index"
            @del="removeHandle"
            ></todo-list>
            <!-- <li v-for="(item,index) of items":key="index">{{item}}</li> -->
        </ul>
    </div>
    <script src="js/js.js"></script>

</body>
</html>

View Code

// global component
Vue.component('todo-list',{
    props:['content','index'],
    template:'<li @click="removeCall">{{content}}</li>',
    methods:{
        removeCall:function(){
            this.$emit('del',this.index); // 发布事件 del ，传入参数 index
        }
    }
});

// 传递媒介：
// 父组件 - 子组件  属性  
// 子组件 - 父组件  发布 - 订阅 、 父组件预定义方法接受   


// local
// var TodoItem={
//     props:['content'], 
//     template:'<li>{{content}}</li>'
// };
var app=new Vue({
    el:'#app',
    // components:{              
    //     'todo-list':TodoItem
    // },
    data:{
        inputVal:'',
        items:[]
    },
    methods:{
        addList:function(){
            this.items.push(this.inputVal);
            this.inputVal='';
        },
        removeHandle:function(index){  // 父组件 -  接受处理程序          
            this.items.splice(index,1);
        }
    }
});

View Code

1.2 带索引渲染 v-for="(item, index) in items"

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <ul id="example-2">
    <li v-for="(item, index) in items">
      {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
  </ul>

  <script src="vue.js"></script>

  <script>
    var example2 = new Vue({
      el: '#example-2',
      data: {
        parentMessage: 'Parent',
        items: [{
            message: 'Foo'
          },
          {
            message: 'Bar'
          }
        ]
      }
    })
  </script>



</body>

</html>

View Code

2. 对象属性列表

2.1 普通渲染（普通的js对象不加引号， json 文件默认为属性打上引号，同构造函数大写一样，是一个默认）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <ul id="v-for-object" class="demo">
    <li v-for="value in object">
      {{ value }}
    </li>
  </ul>

  <script src="vue.js"></script>

  <script>
    new Vue({
      el: '#v-for-object',
      data: {
        object: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        }
      }
    })
  </script>



</body>

</html>

View Code

2.2 带属性值

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

2.3 带属性值和索引

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

posted @ 2019-05-21 18:19 justSmile2 阅读(199) 评论(0) 收藏举报

刷新页面返回顶部

justSmile2

惜时如金

vue 列表渲染 v-for