1.Vue动态渲染列表------v-for用法详解:

Html

<figure v-for="list in lists">
    <div>
    <a v-bind:href=" list.big">
       <img v-bind:src="list.small">
    </a>
</div>

</figure>

<template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>

渲染在页面上的样式: < figure >...</ figure >

< figure >...</ figure >

< figure >...</ figure >

用法:

  1. 想动态增加那个元素就在其上加 :

v-for=[自定义名字] in [json中数组名字]

  1. 绑定在html中的数据用 :

(1)元素内部的属性用v-bind[属性] = [自定义名字].json数组中的属性’

(2)标签内容引用 {{ [自定义名字].json数组中的属性 }}

JS-vue-ajax

var vm = new Vue({
    el:'#main',
    data:{
        lists : '',
        honors:''
    },
    methods:{
        listMessage: function () {
            var _self = this;
            $.ajax({
                type: 'GET',
                url: 'js/json/photolist.json',
                success:function(data) {
                    _self.lists = data.lists;
                }
            });
        },
        listMessageTwo: function () {
            var _self = this;
            $.ajax({
                type: 'GET',
                url: 'js/json/photolist.json',
                success:function(data) {
                    _self.honors = data.honors;
                }
            });
        }
    },
    ready:function(){
        var _this =this;
        _this.listMessage();
        _this.listMessageTwo();
    }
})

用法:

  1. data中定义要用的到的 [json中数组名字]
data:{
    lists : '',
    honors:''
}

json中:

{{
  "lists": [
    {
      "big": "images/photo-end.jpg",
      "small":"images/photo2.jpg"
    }  ],
  "honors":[
    {
      "big": "images/photo-end.jpg",
      "small":"images/photo.png"
    }
  ]
}
 
  1. 在methods中定义一个函数,通过ajax获取数据
success:function(data) {
    _self.lists = data.lists;
}

成功获取数据后,将 json中的数组名赋值给 data中的数组名,在通过html中v-for的引用,将json数组中的数据传值到html中

注意:

methods方法中的函数需要调用才能执行,如果页面是在已进入就执行后台数据渲染的,需要在methods方法下添加 ready函数,并在其中引用ajax函数

ready:function(){
    var _this =this;
    _this.listMessage();
    _this.listMessageTwo();

索引用法:

<li v-on:click="typeNavClick($event,$index)" v-for="(index,main) in mainList" 

 

vue v-for详解的更多相关文章

  1. vue 源码详解(二): 组件生命周期初始化、事件系统初始化

    vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...

  2. vue 文件目录结构详解

    vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...

  3. Vue props用法详解

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...

  4. main.js index.html与app.vue三者关系详解

    main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186   main.js与index.html是nodejs的项目启 ...

  5. vue 源码详解(一):原型对象和全局 `API`的设计

    vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...

  6. 【05】Vue 之 实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  7. Vue.js项目详解

    还是以Blog项目来讲解,最近我本人利用闲暇时间,以博客作为参考学习一些新的技术并尝试之前没有尝试过的思路来玩玩. 技术看似枯燥,但是带有一个目的来学,你会发现还是蛮有趣的. 主要实践的就是前后端分离 ...

  8. vue:vuex详解

    一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...

  9. nodeJs+vue安装教程详解 相信

    相信很多朋友都在装node服务和安装vue的时候会遇到一些问题,下面为大家详细介绍node服务的安装以及vue的安装: 1.nodeJs官网下载版本(根据自己电脑的配置进行相应下载即可):默认安装路径 ...

  10. Vue生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

随机推荐

  1. vue+Iview+gulp 生成文档说明

    1.安装npm gulp相关插件 比如:gulp.gulp-concat.gulp-htmlmin.gulp-cssmin.gulp-cheerio.gulp-clean 2. 编写gulpfile. ...

  2. Installer - Eclipse配置Data Source Explorer

    一.配置Oracle数据库连接 1.打开配置窗口 在[window]菜单中的[show windows]选择[other],在弹出的窗口中选择[Data Source Explorer]进行数据数据库 ...

  3. HDU-2095-find your present (2)-位或/STL(set)

    In the new year party, everybody will get a "special present".Now it's your turn to get yo ...

  4. Window中在Intellij idea开发时常用快捷键

    以下idea中的快捷键是在window 7中确认过,如果快捷键不起作用,可能是该快捷键被其它软件占用,或系统不同导致. 1.Ctrl + Z:撤回代码: 2.Ctrl + Shift + Z:恢复撤回 ...

  5. C++ 系列:Boost Thread 编程指南

    转载自:http://www.cppblog.com/shaker/archive/2011/11/30/33583.html 作者: dozbC++ Boost Thread 编程指南0 前言1 创 ...

  6. Stopwatch 计时器类

    C#_Stopwatch 类   命名空间:System.Diagnostics Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 Stopwatc ...

  7. 廖雪峰Java13网络编程-3其他-2RMI远程调用

    1.RMI远程调用: Remote Method Invocation 目的:把一个接口方法暴露给远程 示例: 定义一个接口Clock,它有一个方法能够获取当前的时间,并编写一个实现类,来实现这个接口 ...

  8. resful风格

    package com.atguigu.springboot.controller; import com.atguigu.springboot.dao.DepartmentDao; import c ...

  9. 最后的egret

    坚持做一件事真的好难~ 决定重新写博客的时候想着一定要坚持一个周一篇,然而.... 年后上班老板找我的第一件大事:以后公司的棋牌产品不会有大的动作了:公司PHP(内部用的运营后台)的小姐姐休产假了,我 ...

  10. 基于知识图谱的APT组织追踪治理

    高级持续性威胁(APT)正日益成为针对政府和企业重要资产的不可忽视的网络空间重大威胁.由于APT攻击往往具有明确的攻击意图,并且其攻击手段具备极高的隐蔽性和潜伏性,传统的网络检测手段通常无法有效对其进 ...