返回顶部
首页 > 资讯 > 精选 >Vue处理循环数据流程的代码怎么写
  • 600
分享到

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

2023-07-06 00:07:13 600人浏览 泡泡鱼
摘要

这篇文章主要介绍了Vue处理循环数据流程的代码怎么写的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue处理循环数据流程的代码怎么写文章都会有所收获,下面我们一起来看看吧。下面就展示使用vue处理循环的一个例子

这篇文章主要介绍了Vue处理循环数据流程的代码怎么写的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue处理循环数据流程的代码怎么写文章都会有所收获,下面我们一起来看看吧。

下面就展示使用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处理循环数据流程的代码怎么写”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。

--结束END--

本文标题: Vue处理循环数据流程的代码怎么写

本文链接: https://lsjlt.com/news/356723.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作