Vue处理循环数据流程的代码怎么写 - 开发技术

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
这篇文章主要介绍了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处理循环数据流程的代码怎么写”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注片云行业资讯频道。

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: vue

“Vue处理循环数据流程的代码怎么写 - 开发技术” 的相关文章

SpringBoot中怎么整合Ehcache实现热点数据缓存 - 开发技术

本篇内容介绍了“SpringBoot中怎么整合Ehcache实现热点数据缓存”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、简介EhCache 是一个纯 Java 的...

C++随机数

由于qrand()得到的是固定的伪随机数,而time得到的如果在时间小于一秒则相差不大,要想每次运行程序生成的不一样,我的做法是把这两种相加,这样下次运行得到的多个随机数就和上次不一样了. //random rect QRectF randRect; l...

utf8和UTF-8的不同 不同web程序之间的传值

utf8和UTF-8的不同,像下面这种情况,就要用UTF-8,而mysql中可能有要用到utf8struts2base1 @Action(value="m3",results={@Result(name="method3",type="redirect",location="${url}")})...

区块链技术未来的发展前景如何

区块链行业增长潜力大,五大方面推动技术健康发展区块链基本概况分析区块链(Blockchain)技术作为以去中心化方式集体维护一个可靠数据库的技术方案,具有去中心化、防篡改、高度可扩展等特点,正成为继大数据、云计算、人工智能、虚拟现实等技术后又一项将对未来产生重大影响的新兴技术,有望推动人类从信息互联...

Linux设置网络代理-CSDN博客

设置网络代理操作简介 设置临时代理仅在当前shell会话生效 # export http_proxy=http://ip:port # export https_proxy=http://ip:port 设置永久代理 # vi /etc/profile #...

从输入URL到页面显示过程原理是什么 - 开发技术

这篇文章主要讲解了“从输入URL到页面显示过程原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“从输入URL到页面显示过程原理是什么”吧!前言说说从输入 URL 到页面显示的过程,这是一个在面试中经常会被问到的问...