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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
百度地图api如何使用
Aug 03 Javascript
Jquery 效果使用详解
Nov 23 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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的PDO操作简单示例
2016/03/30 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
详解vue中组件参数
2018/07/09 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
EJB发布WEB服务一般步骤
2012/10/31 面试题
优秀员工自荐信范文
2013/10/05 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
教师自我鉴定范文
2014/03/20 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2015年商场工作总结
2015/04/27 职场文书
工程进度款催款函
2015/06/24 职场文书
2019财务转正述职报告
2019/06/27 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript