Vue处理循环数据流程示例精讲
更新时间：2023年04月11日 09:38:58 作者：haohulala
这篇文章主要介绍了Vue处理循环数据流程，这个又是一个编程语言， 模版语法里面必不可少的一个， 也是使用业务场景使用最多的一个环节。所以学会使用循环也是重中之重了
以往我写前端页面的时候都是使用theamleaf模板引擎，模板引擎的原理其实就是服务端进行页面的渲染，这里需要说一下，渲染的意思实际上就是将相应的数据变成html标签，比如我们使用了 th:each 标签，那么在服务端，就会用for循环将数据装填成html代码。
那么我们也可以使用vue框架进行页面渲染，使用vue进行渲染的话，后端只需要将json字符串传给前端，然后前端拿到数据后在浏览器端进行渲染，实际上就是使用了客户端的资源进行页面渲染，这样子做可以减轻服务端的压力。当请求量很小的时候看不出来减轻了什么压力，但是当请求量很大的时候，就能节省很多计算资源。
使用vue还有一个好处就是可以采用前后端分离的方式开发，前端只需要关心后端传什么样格式的数据就行了。在使用了vue后感觉确实会比theamleaf的方式好一点，至少代码清爽一点。
下面就展示使用vue处理循环的一个例子，首先声明，这个例子使用的是vue3的语法，vue3和vue2的语法稍微有亿点点不同，使用的时候需要注意一下。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纳米搜索</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow" >
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<!-- 先编写一个搜索栏 -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<!-- 这里面有两个个部分 -->
<div class="row">
<!--<div class="col-md-2"></div>-->
<div class="col-md-12">
<div style="float: left; margin-top: 20px;margin-left: 20%">
<h2 style="color:cornflowerblue">纳米搜索</h2>
</div>
<div style="float: left; margin-top: 20px; margin-left: 20px">
<form class="form-inline" action="/search111" method="post">
<div class="form-group" style="margin-right: 20px" >
<div class="input-group" >
<input type="text" class="form-control" name="keyword" id="keyword" placeholder="请输入要搜索的关键词">
</div>
</div>
<button id="button111" type="submit" class="btn btn-primary" >搜索</button>
</form>
</div>
</div>
<!--<div class="col-md-2"></div>-->
</div>
<hr>
<div id="app">
<div v-for="item of msg">
<!-- 第一行是url -->
<a :href="item.url" rel="external nofollow" target="_blank">
<div style="color: #0000cc">{{item.title}}</div>
</a>
<div style="color: #28a745">{{item.url}}</div>
<!-- 这一行显示文章作者 -->
<div style="color: #000000">文章作者：<span style="color: #000000; margin-left: 10px">{{item.author_name}}</span></div>
<!-- 这一行显示标签 -->
<div style="color: #000000">文章标签：<span style="color: #000000; margin-left: 10px">{{item.tag}}</span></div>
<!-- 下面一行显示发表时间，阅读数和收藏数 -->
<div>
<div style="color: #000000">发表时间：<span style="color: #000000;margin-left: 10px">{{item.up_time}}</span></div>
<div style="color: #000000;float: left">阅读量：<span style="color: #000000;margin-left: 10px">{{item.read_volum}}</span></div>
<div style="color: #000000;float: left; margin-left: 10px">收藏量：<span style="color: #000000;margin-left: 10px">{{item.collection_volum}}</span></div>
</div>
<br>
<hr>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</body>
<script type="text/javascript">
Vue.createApp({
data() {
return {
msg : [{
"author_name": "weixin_68829137",
"collection_volum": 31,
"read_volum": 747,
"tag": "spring java ",
"title": "Spring事务详解",
"u_id": 50,
"up_time": "2023-03-21",
"url": "https://blog.csdn.net/weixin_68829137/article/details/129687454"
}, {
"author_name": "chenxiong103",
"collection_volum": 5,
"read_volum": 4605,
"tag": "javascript LayUI ",
"title": "layui.table动态获取表头和列表数据示例",
"u_id": 115,
"up_time": "2020-07-11",
"url": "https://blog.csdn.net/chenxiong103/article/details/107290133"
}, {
"author_name": "qq_36785719",
"collection_volum": 2,
"read_volum": 7151,
"tag": "JavaScript 前端 ",
"title": "layui实现表格行拖拽，列拖拽等表格操作 -----layui-soul-able",
"u_id": 111,
"up_time": "2020-07-03",
"url": "https://blog.csdn.net/qq_36785719/article/details/107101554"
}, {
"author_name": "weixin_42334518",
"collection_volum": 2,
"read_volum": 2838,
"tag": "java ",
"title": "layui的使用，layui的soulTable的史诗级坑",
"u_id": 108,
"up_time": "2020-10-15",
"url": "https://blog.csdn.net/weixin_42334518/article/details/109093503"
}, {
"author_name": "u013733643",
"collection_volum": 3,
"read_volum": 1133,
"tag": "javascript html ",
"title": "layui数据表格实现重载数据表格功能(搜索功能）",
"u_id": 114,
"up_time": "2023-01-30",
"url": "https://blog.csdn.net/u013733643/article/details/128806705"
}, {
"author_name": "weixin_45477086",
"collection_volum": 1,
"read_volum": 1241,
"tag": "spring java ",
"title": "Spring事务详解与使用",
"u_id": 69,
"up_time": "2022-05-05",
"url": "https://blog.csdn.net/weixin_45477086/article/details/122234635"
}],
code : 200
}
}
}).mount("#app");
</script>
</html>上面的例子中已经将数据都放到代码里面了，用来模拟后端向前端发送数据。
需要注意的一点是，我们的js代码需要写在待渲染的html代码后面，因为浏览器是从上到下读代码的，如果你将js代码写在前面，那么就会找不到待绑定html标签。
上述代码可以直接在浏览器中运行，你可以结合运行结果来理解vue的简单使用方法。
到此这篇关于Vue处理循环数据流程示例精讲的文章就介绍到这了,更多相关Vue处理循环数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了深入理解Vue transition源码分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了VuePress 静态网站生成方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要给大家介绍了关于Vue3超详细的ref()用法的相关资料,在Vue3中ref函数不仅可以用于在组件中获取DOM元素或子组件的引用,还可以直接访问组件元素本身,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了element-ui配合node实现自定义上传文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue-router源码之history类的浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介为大家详细绍了vue微信分享插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法
这篇文章主要介绍了使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法，解决方法不复杂通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-08-08
imba 是一种新的编程语言，可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。这篇文章主要介绍了使用imba.io框架,得到比 vue 快50倍的性能基准,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue环境搭建简单教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最近在做项目中前端采用Vue技术,发现首页加载速度非常之慢,下面这篇文章主要给大家介绍了关于vue终极性能优化方案,主要解决首页加载慢问题,需要的朋友可以参考下2022-02-02
最新评论