详解vuejs之v-for列表渲染
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”代替,优点是数据没有加载完时不会看到{{}}占位符
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue.js学习教程之列表渲染详解
本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍: v-for 可以使用 v-for 指令基于一个数组渲染一个列表.这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名: 示例: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li>
-
Vue列表页渲染优化详解
vue列表页渲染优化,具体内容如下 想法 初始化时,vue会对data做getter.setter改造,在现代浏览器里,虽然JS已经足够快,但仍然有优化空间. 列表页的数据结构为: list: [ // 每一项有不同的来源,不同来源的数据都不同,因此放到一个数组里 [{ sourceId: 'xmla', // 来源的唯一标识 id: 3001, // 资源的唯一标识 source: '喜马拉雅', // 来源 title: '昆曲之牡丹亭', imageUrl: 'http://x.baidu
-
Vue.JS入门教程之列表渲染
你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表.对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例.这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性.此外,你还可以通过 $index 属性来获取当前实例对应的数组索引. <ul id="demo"> <li v-repeat="items" class="ite
-
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc
-
VUEJS实战之构建基础并渲染出列表(1)
前言 我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须面对.因此,学习是唯一的出路. 纵向比较了N款前端框架,最终选择了VUE,为什么呢?理由如下: 1.angular 前途不明,1.x学习曲线高,并且好像被放弃了,而2则还没有正式推出. 2.react 比较厉害,但是没接触. 3.VUE简单,通过上手,比较适合我的思维和水平. 4.vue有中文文档,我看起来比较舒服. 既然决定学习vue,那么最好的学习方法就是实战.
-
Vue.js列表渲染绑定jQuery插件的正确姿势
使用v-for绑定列表时,有时候需要绑定如select2之类的jQuery插件. 需要在Vue根据数组内容生成dom元素之后,去找到该dom元素,然后 $().xxx绑定jQuery插件. 之前使用Vue.nextTick方法,在一次dom更新以后执行延迟回调,渲染jQuery插件. 然而这并不是一种很好的方式,有时候难以确定dom元素更新是否是我们需要关注的那个. 在列表中渲染Jquery插件的正确姿势,是使用自定义指令.自定义指令提供了一些钩子函数,可以准确的监听到dom元素与数据的绑定周期
-
详解redis数据结构之压缩列表
详解redis数据结构之压缩列表 redis使用压缩列表作为列表键和哈希键的底层实现之一.当一个列表键只包含少量的列表项,并且每个列表项都是由小整数值或者是短字符串组成,那么redis就会使用压缩列表存储列表项:同理,当一个哈希表包含的键值对都是由小整数值或者是短字符串组成,并且存储的键值对数目不多时,redis也会使用压缩列表来存储哈希表.以下是压缩列表存储结构: zlbytes长度为4个字节,记录了整个压缩列表所占用的字节数 zltail长度为4个字节,记录了压缩列表起始位置到压缩列表尾节
-
详解vuejs中执行npm run dev出现页面cannot GET/问题
1.问题描述 最近用vue-cli搭建了一个小项目,其中在对项目进行打包测试时修改了webpack.base.conf.js中的配置信息,之后再用npm run dev之后出现如下的情况: 1.浏览器中无法呈现已有页面,并且在浏览器控制台中报404错误 2.命令窗口中并没有报错 其中有人说是路由等问题,后来通过创建新的项目对比配置文件信息,发现是配置信息导致: 注释部分是打包时需要修改的地方(根据打包时网站根目录,这个没处理好可能会出现图片路径加载失败问题),而上面才是在开发环境下需要的配置信息
-
详解Vue demo实现商品列表的展示
Vue实现商品列表的展示是一个比较简单的入门demo,下面是具体的实现: 简单CSS样式: <style> #box ul{ display: flex; flex-wrap: wrap; } #box li{ padding: 3px; list-style: none; margin-right: 15px; border: 1px solid #eee; } #box img{ width: 200px; height: 150px; } </style> html: <
-
详解Nuxt.js Vue服务端渲染摸索
本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/ Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的. 我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到.(2)用
-
详解React项目的服务端渲染改造(koa2+webpack3.11)
因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要
-
详解VUE Element-UI多级菜单动态渲染的组件
以下是组件代码: <template> <div class="navMenu"> <label v-for="navMenu in navMenus"> <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'" :key="navMenu.
-
详解vuejs之v-for列表渲染
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
-
详解基于vue的服务端渲染框架NUXT
Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用
-
详解VueJs中的V-bind指令
引子 v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 一.概述 v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑
-
详解VueJs异步动态加载块
首先定义组件为异步加载 define(['jquery','vue'],function($,Vue){ Vue.component('comp1',function(resolve){ require(['component/comp1'],resolve); }); Vue.component('comp2',function(resolve){ require(['component/comp2'],resolve); }); var b = new Vue({ el:"#app"
随机推荐
- extjs fckeditor集成代码
- Vue.js中组件中的slot实例详解
- 杀毒除根 巧用注册表防止病毒重新生成
- java实现MD5加密算法的实例代码
- js 实现菜单上下显示附效果图
- 深入理解用mysql_fetch_row()以数组的形式返回查询结果
- 基于MYSQL中优化的一些方法
- MVVM模式中ViewModel和View、Model有什么区别?
- java制作android 日历代码分享
- C# Assembly类访问程序集信息
- 全面了解servlet中cookie的使用方法
- Oracle的substr和instr函数简单用法
- PHP实现将HTML5中Canvas图像保存到服务器的方法
- Android Imageloader的配置的实现代码
- C#实现异步发送邮件的方法
- Android自定义View的实现方法实例详解
- IOS微信端confirm以及alert去掉网址的实例代码
- Java多线程Queue、BlockingQueue和使用BlockingQueue实现生产消费者模型方法解析
- Ubuntu14.04服务器环境下配置PHP7.0+Apache2+Mysql5.7的方法
- python 查找文件名包含指定字符串的方法