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>

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>

var app=new Vue({

    el:'#app',

    // template:'<h1>hello {{mes}}</h1>',

    data:{

        inputVal:'',

        items:[]

    },

    methods:{

        addList:function(){

            this.items.push(this.inputVal);

            this.inputVal='';

        }

    }

});

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>

// 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='';

        }

    }

});

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>

// 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);

        }

    }

});

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>

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>

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>

巴特西

vue 列表渲染 v-for

最新文章

热门文章