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. shiro的Quickstart

    /** * Simple Quickstart application showing how to use Shiro's API. * * @since 0.9 RC2 */ public cla ...

  2. 牛客 19-5-3 QAQ

    #include<iostream> #include<cstring> using namespace std; typedef long long LL; int main ...

  3. webpack 最新版

    之前说过老的版本,webpack@3.8.1 这个版本,现在我们来看看,新版本和老版本的区别 webpack 4 以上的版本 npm 全称 node package manager (node 包管理 ...

  4. Cross-Multimedia dataset

    Wikipedia: http://www.svcl.ucsd.edu/projects/crossmodal/ PKU Xmedia: https://github.com/yeqinglee/mv ...

  5. samba安装应用实例-2

    应用实例: 先安装samba软件,yum install -y samba1.需求:共享一个目录,使用用户名和密码登录才可以访问,要求可读可写.(1)首先打开samba配置文件/etc/samba/s ...

  6. 报错：Original error: Could not proxy command to remote server. Original error: Error: read ECONNRESET

    问题:Appium的android真机启动手机时,会遇到以下问题: An unknown server-side error occurred while processing the command ...

  7. Jenkins Pipeline 语法

    Pipeline语法 先讲Declarative Pipeline,所有声明式管道都必须包含在pipeline块中: 123 pipeline { /* insert Declarative Pipe ...

  8. 【Qt开发】Qt应用程序发布封装

    问题:在使用Qt5.3.2编写程序并release,文件夹中已经添加了必要的dll,但在其他机子上运行程序失败,出现了下面的情况: 解决方法一:在C:\Qt\Qt5.3.2\5.3中进入mingw48 ...

  9. oracle 11g sqlplus和plsql developer 乱码解决方案

    ----------------------------------华丽的分隔符---------------------------------- 在cmd终端下运行            中文的话 ...

  10. Jmeter 04 Jmeter变量的使用

    在使用jmeter进行接口测试时,我们难免会遇到需要从上下文中获取测试数据的情况,这个时候就需要引入变量了. 定义变量 添加->配置元件->用户自定义的变量 添加->配置元件-> ...