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 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
vue写一个组件
Apr 09 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
php删除指定目录的方法
2015/04/03 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
python hough变换检测直线的实现方法
2019/07/12 Python
使用python实现kNN分类算法
2019/10/16 Python
python实现飞机大战小游戏
2019/11/08 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
实习生单位鉴定意见
2013/12/04 职场文书
公司年终奖分配方案
2014/06/16 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python