Vue处理循环数据流程示例精讲
作者：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处理循环数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！