详解vuejs之v-for列表渲染
作者：若强 发布时间：2023-07-02 16:56:39
标签：vue.js,列表渲染
Vue.js是一个构建数据驱动的web界面的库。重点集中在MVVM模式的ViewModel层，因此非常容易与其它库或已有项目整合
Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单
如下列表展示，当我们从后端接口或者json文件使用ajax获取数据之后现实到页面，我们有n中方式去把数据渲染到页面
1.使用js的for循环去遍历填充
2.ng的ng-repeat
今天我们使用vue.js的v-for
一、html
<div class="shop_list_box">
<ul>
<li><span>蚌埠</span><span>凤阳东路</span></li>
<li><span>蚌埠</span><span>凤阳东路</span></li>
</ul>
</div>
二、Json数据节点
三、使用v-for绑定数据到页面上
引用vue.js,请求数据成功之后实例化一个Vue。el是绑定到那个元素下
注意这里时一个数组里面包了一些对象---->{}或者[{},{},{}]
GetAjaxData("js/cstore2.json", {name:"zq"}, function (dat) {
var data = dat.cstore
// console.log(data)
var vm = new Vue({
el: '#example',
data: {
items: data
}
})
});
<div class="shop_list_box">
<ul id="example">
<li v-for="item of items">
<span>{{ item.city }}</span><span>{{ item.shop }}</span>
</li>
</ul>
</div>
到这里就ok了。
不过也可以使用template v-for
template v-for 类似于v-for
{{item.city}}也可以使用v-text=” item.city”代替，优点是数据没有加载完时不会看到{{}}占位符
来源：http://www.cnblogs.com/ruoqiang/p/5602996.html
0
投稿猜你喜欢
- //冒泡排序func mpSort(array []int) { for i:=0;i<len(array);i++ {
一、地理编码与逆编码地理编码与逆编码表示的是地名地址与地理坐标（经纬度)互相转换的过程。其中，将地址信息映射为地理坐标的过程称之为地理编码；- 浅拷贝和深拷贝拷贝函数是专门为可变数据类型list、set、dict使用的一种函数。作用是，当一个值指向另一个值的时候，也不会影响指向的值，
- 最近因项目需要用ACCESS做数据库开发WEB项目 看论坛上还许多人问及ACCESS被注入的安全问题 许多人解决的方法仍然是用Replace
- 如何在本地机器上创建缓存？用法到是很简单，只需先创建Stream对象的实例，然后开始写入数据即可： Dim str&n
- 本文实例分析了python对json的相关操作。分享给大家供大家参考，具体如下：什么是json：JSON(JavaScript Object
- 1. # 可以使用LaTeX表示数学公式# 可以使用LaTeX表示数学公式from IPython.display import Latex
- python开发中经常遇到报错的情况，但是warning通常并不影响程序的运行，而且有时特别讨厌，下面我们来说下如何忽略warning错误。
- 今天老肥让我试试百度知道的新功能：插入地图。该功能需要登录才能操作，因此我意外的发现百度用户登录的弹出层变了。我很喜欢这个改进，利用TAB来
- 本文实例讲述了Django restframework 框架认证、权限、限流用法。分享给大家供大家参考，具体如下：概述Django Rest
- elementUI 实现一个自定义的表单模板组件注：该功能基于elementUI 背景：在项目开发中，我们会遇到这种需求，在管理后台添加自定
- 本文实例讲述了Python操作mysql数据库实现增删查改功能的方法。分享给大家供大家参考，具体如下：#coding=utf-8import
- 行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。大片密密麻麻的文字往往会让人觉得乏味，因
- # 0. PyCharm 常用快捷键# 1. 查看使用库源码PyCharm 主程序员在 Stackoverflow 上答道经常听人说，多看源
- 01 什么是pocPoC（全称: Proof of Concept）, 中文译作概念验证。在安全界，你可以理解成为漏洞验证程序。和一些应用程
- <％ Function ReplaceUrl2(HTMLstr) Dim n,st
- 不论你是有着多年经验的 Python 老司机还是刚入门 Python 不久，你一定遇到过UnicodeEncodeError、Unicode
- 前言刚刚看了EuroPython 2017一篇演讲，Why You Don't Need Design Patterns in Py
- 本文实例讲述了Python中列表与元组的乘法操作。分享给大家供大家参考，具体如下：直接上code吧，还可以这么玩儿列表乘法：li=[1,]l
- 如下所示：class bcolors: HEADER = '\033[95m' OKBLUE = &
