vue的for循环使用方法


Posted in Javascript onFebruary 12, 2019

vue是一套当下非常受欢迎的构建用户界面的渐进式框架。那如何使用vue进行数据循环呢?下面的案例将使用v-for循环进行数据的遍历。

vue的for循环使用方法

1、打开html开发工具,新建一个html 代码页面。

vue的for循环使用方法

2、在新建的html代码页面创建一个<ul>标签同时给这个标签设置一个id为app,然后在<ul>里创建一个<li>标签。

代码:

<ul id="app">

<li></li>

</ul>

vue的for循环使用方法

3、引入vue.js。在<body>结束标签前面引入下载好的vue.js文件。

vue的for循环使用方法

4、创建vue实例。在引入的vue.js文件后面新建一个<script>标签,然后在这个标签里使用new Vue()创建vue实例,并设置一个数组为 sites。

代码:

<script>

var app = new Vue({

el:"#app",

data:{

sites: [

   { name: 'Runoob' },

   { name: 'Google' },

   { name: 'Taobao' }

  ]

}

})

</script>

vue的for循环使用方法

5、使用v-for循环。在<li>标签上添加 v-for="site in sites",然后使用{{site.name}}进行遍历数组的打印。

<li>代码:<li v-for="site in sites"> {{site.name}}</li>

vue的for循环使用方法

6、保存html代码后使用浏览器打开,即可看到浏览器页面上打印出用户名,表示vue的循环遍历已经使用成功。

vue的for循环使用方法

7、所有代码。可以直接复制所有代码,粘贴到新建html文件上,修改vue.js路径保存后使用浏览器打开即可看到效果。所有代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="app"><li v-for="site in sites"> {{site.name}}</li></ul><script type="text/javascript" src="js/vue.js" ></script><script>var app = new Vue({el所有代码。可以直接复制所有代码,粘贴到新建html文件上,修改vue.js路径保存后使用浏览器打开即可看到效果。所有代码:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="app"><li v-for="site in sites"> {{site.name}}</li></ul><script type="text/javascript" src="js/vue.js" ></script><script>var app = new Vue({el:"#app",data:{sites: [   { name: 'Runoob' },   { name: 'Google' },   { name: 

:"#app",data:{sites: [   { name: 'Runoob' },   { name: 'Google' },   { name: 'Taobao' }  ]}})</script></body></html> 

'Taobao' }  ]}})</script></body></html>
Javascript 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
JS hashMap实例详解
May 26 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
Angular短信模板校验代码
Sep 23 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
JavaScript常用工具方法封装
Feb 12 #Javascript
vue组件开发props验证的实现
Feb 12 #Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 #Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 #Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 #Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 #Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 #Javascript
You might like
与数据库连接
2006/10/09 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PDO::exec讲解
2019/01/28 PHP
jQuery总体架构的理解分析
2011/03/07 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python实现大文件分割与合并
2019/07/22 Python
python pandas 时间日期的处理实现
2019/07/30 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
django教程如何自学
2020/07/31 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
优秀村官事迹材料
2014/01/10 职场文书
总账会计岗位职责
2014/03/13 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
丧事答谢词
2015/01/05 职场文书