Vue处理循环数据流程的代码怎么写

阅读：1155 来源：乙速云作者：代码code

Vue处理循环数据流程的代码怎么写

下面就展示使用vue处理循环的一个例子，首先声明，这个例子使用的是vue3的语法，vue3和vue2的语法稍微有亿点点不同，使用的时候需要注意一下。





    
    纳米搜索
    cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow" >

纳米搜索

搜索

{{item.title}} {{item.url}} 文章作者：{{item.author_name}} 文章标签：{{item.tag}}

发表时间：{{item.up_time}}

阅读量：{{item.read_volum}} 收藏量：{{item.collection_volum}}

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");

上面的例子中已经将数据都放到代码里面了，用来模拟后端向前端发送数据。

需要注意的一点是，我们的js代码需要写在待渲染的html代码后面，因为浏览器是从上到下读代码的，如果你将js代码写在前面，那么就会找不到待绑定html标签。

分享到：

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： hlamps#outlook.com （#换成@）。

上一篇： Java中删除文件或文件夹的方法有哪些

下一篇： Python中的运算符有哪些及怎么用

你可能感兴趣