Vue处理循环数据流程的代码怎么写 - 开发技术
阿里云国际版折扣https://www.yundadi.com |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
下面就展示使用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 > <h3 >纳米搜索</h3> </div> <div > <form class="form-inline" action="/search211" method="post"> <div class="form-group" > <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 >{{item.title}}</div> </a> <div >{{item.url}}</div> <!-- 这一行显示文章作者 --> <div >文章作者：<span >{{item.author_name}}</span></div> <!-- 这一行显示标签 --> <div >文章标签：<span >{{item.tag}}</span></div> <!-- 下面一行显示发表时间，阅读数和收藏数 --> <div> <div >发表时间：<span >{{item.up_time}}</span></div> <div >阅读量：<span >{{item.read_volum}}</span></div> <div >收藏量：<span >{{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处理循环数据流程的代码怎么写”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注片云行业资讯频道。阿里云国际版折扣https://www.yundadi.com |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |