详解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
投稿
猜你喜欢
- 所谓网络爬虫,通俗的讲,就是通过向我们需要的URL发出http请求,获取该URL对应的http报文主体内容,之后提取该报文主体中我们所需要的
- 在网页局部的布局上,需要采用大量的自适应,来满足不同长度数据、内容的合理呈现。以此保证页面不至于因为内容过多等原因,导致重叠、溢出、撑开等破
- 报表服务器数据库可以为一个或多个报表服务器实例提供内部存储。因为报表服务器数据库架构可能会因为推出新的 Reporting Services
- 目录准备数据集导入所需的软件包将数据从文件加载到Python变量拆分数据进行训练和测试标记化并准备词汇预处理输出标签/类建立Keras模型并
- 利用Python + wxpy 可以快速的查询自己好友的地区分布情况,以及好友的性别分布数量。还可以批量下载好友的头像,拼接成大图。本次教程
- 什么是装饰器?装饰器(Decorator)相对简单,咱们先介绍它:“装饰器的功能是将被装饰的函数当作参数传递给与装饰器对应的函数(名称相同的
- 安装顺序rpm -ivhmysql-community-common-5.7.18-1.el7.x86_64.rpmmysql-commun
- em 和 strong 的区别,可以从三个层次上来谈。首先看 HTML 4.01 中的说明:EM: Indicates emphasis.S
- 想必大家都很喜欢用Word打字,用Excel进行计算和规划,用PowerPoint作幻灯片进行展示…,但是这只用到了Office系列产品的很
- 本文实例为大家分享了使用python的twisted框架编写一个简单的聊天室具体代码,供大家参考,具体内容如下下面是基本架构代码:# -*-
- 前言写程序已经丢掉很长一段时间了,最近觉得完全把技术丢掉可能是个死路,还是应该捡起来,所以打算借CSDN来记录学习过程, 由于以前没事的时候
- 本文实例总结了php处理json格式数据的方法。分享给大家供大家参考,具体如下:1.json简介:何为json?简 单地说,JSON 可以将
- 前言通常在项目中,一般都需要一种编程语言来操作数据库,使用Python来操作数据库有着天然的优势,因为Python的字典和MongoDB的文
- 一.生成器简介在python中,带yield的方法不再是普通方法,而是生成器,它的执行顺序不同与普通方法.普通方法的执行是从头到尾,最后re
- import time, randomclass GuessNum: def __init__(self
- 本文实例讲述了PHP字典树(Trie树)定义与实现方法。分享给大家供大家参考,具体如下:Trie树的概念(百度的解释):字典树又称单词查找树
- 01、函数参数和返回值的作用函数根据 有没有参数 以及 有没有返回值,可以相互结合,共有四种:无参数 无返回值无参数 有返回值有参数 无返回
- Codeigniter支持缓存技术,以达到最快的速度。尽管CI已经相当高效了,但是网页中的动态内容、主机的内存CPU和数据库读取速度等因素直
- 本文实例讲述了python使用Image处理图片常用技巧。分享给大家供大家参考。具体分析如下:使用python来处理图片是非常方便的,下面提
- 我和朋友对此的看法有分歧,我明明记得有不需要返回的时候的?你的看法是对的,例如在表中删除记录。我们来看看下面的例子——在Employee表中