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>

js

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>

js

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

js

// 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的更多相关文章

  1. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  2. Vue列表渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...

  3. Vue入门系列（三）之Vue列表渲染及条件渲染实战

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  5. 14 Vue列表渲染

    列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...

  6. Vue 列表渲染中的key

    首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...

  7. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

  8. vue 列表渲染 v-for循环

    v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合. 1.这里演示一下遍历数组的基本用法,代码如下 <!DOCTYPE html> <html> <h ...

  9. Vue:列表渲染 v-for on a <template>

    类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素.比如: <html> <head> <title>Vue v-f ...

随机推荐

  1. LeetCode328----奇偶链表

    给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是节点的值的奇偶性. 请尝试使用原地算法完成.你的算法的空间复杂度应为 O(1),时 ...

  2. MQTT服务器特性支持详情

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  3. Spring之AOP配置

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  4. MYSQL中唯一约束和唯一索引的区别

    1.唯一约束和唯一索引,都可以实现列数据的唯一,列值可以有null.2.创建唯一约束,会自动创建一个同名的唯一索引,该索引不能单独删除,删除约束会自动删除索引.唯一约束是通过唯一索引来实现数据的唯一. ...

  5. Mac-连接Windows远程桌面软件

    链接:https://download.csdn.net/download/ab601026460/9885775 https://blog.csdn.net/ab601026460/article/ ...

  6. IMDB Classification on Keras

    IMDB Classification on Keras In the book of Deep Learning with Python, there is an example of IMDB m ...

  7. svn版本合并

    假如你的项目(这里指的是手机客户端项目)的某个版本(例如1.0版本)已经完成开发.测试并已经上线了,接下来接到新的需求,新需求的开发需要修改多个文件中的代码,当需求已经开始开发一段时间的时候,突然接到 ...

  8. ffi模块——node调用动态链接库(.so/.dll文件)

    参考资料1:[https://www.npmjs.com/package/ffi] 参考资料2:[http://imweb.io/topic/57732fbef0a5487b05f325bf] 参考资 ...

  9. SQL注入漏洞详解

    目录 SQL注入的分类 判断是否存在SQL注入 一:Boolean盲注 二:union 注入 三:文件读写 四:报错注入 floor报错注入 ExtractValue报错注入 UpdateXml报错注 ...

  10. python基础学习笔记－切片难点

    numbers = [1,2,3,4,5,6,7,8,9,10] print(numbers[5::-2]) print(numbers[10:5:-2]) print(numbers[:5:-2]) ...