详解vuejs之v-for列表渲染
作者:若强 时间:2023-07-02 16:56:39
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
标签:vue.js,列表渲染
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
什么是Python变量作用域
2021-12-25 21:36:24
CodeIgniter启用缓存和清除缓存的方法
2023-11-22 17:04:55
python实现将元祖转换成数组的方法
2022-11-22 02:40:32
Python Flask前端自动登录功能实现详解
2021-12-13 17:36:17
golang逐行读取文件的操作
2023-07-10 14:39:56
Python获取昨天、今天、明天开始、结束时间戳的方法
2022-08-23 18:23:40
用yum安装MySQLdb模块的步骤方法
2024-01-12 18:23:25
Golang实现文件夹的创建与删除的方法详解
2024-02-02 13:57:02
php引用计数器进行垃圾收集机制介绍
2023-10-07 22:41:55
Mysql中的触发器定义与使用
2024-01-26 10:37:45
![](https://img.aspxhome.com/file/2023/4/94734_0s.png)
关于Flask 上下文详细介绍
2023-12-10 01:52:32
![](https://img.aspxhome.com/file/2023/7/85087_0s.png)
MySQL中组合字段之concat()
2024-01-26 04:36:54
基于python实现文件加密功能
2022-02-02 20:28:57
![](https://img.aspxhome.com/file/2023/7/86657_0s.jpg)
pandas将numpy数组写入到csv的实例
2021-02-07 00:51:00
sogou地图API用法实例教程
2024-04-16 10:30:08
tensorflow基于Anaconda环境搭建的方法步骤
2022-11-04 10:12:58
彻底卸载MySQL的方法分享
2024-01-23 11:49:08
Python Pygame实现兔子猎人守护城堡游戏
2021-09-21 11:09:59
![](https://img.aspxhome.com/file/2023/3/95863_0s.jpg)
Python装饰器的练习题
2023-12-07 13:11:48
python 基于 tkinter 做个学生版的计算器
2022-07-30 18:43:54
![](https://img.aspxhome.com/file/2023/1/131351_0s.jpg)