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 相关文章推荐
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 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
从php核心代码分析require和include的区别
2011/01/02 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python如何进行时间处理
2020/08/06 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
高一英语教学反思
2014/01/22 职场文书
技术比武方案
2014/05/19 职场文书
美化环境标语
2014/06/20 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
师德师风学习材料
2014/12/19 职场文书
永远是春天观后感
2015/06/12 职场文书
篮球赛新闻稿
2015/07/17 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
业余无线电通联Q语
2022/02/18 无线电
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers