Vue处理循环数据流程示例精讲
短信预约 -IT技能 免费直播动态提醒
以往我写前端页面的时候都是使用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 class="lazy" data-src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script class="lazy" data-src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script class="lazy" data-src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script class="lazy" data-src="https://unpkg.com/vue@3"></script>
<script class="lazy" data-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处理循环数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
