快捷導(dǎo)航

Vue處理循環(huán)數(shù)據(jù)流程示例精講

更新時間：2023年04月11日 09:38:58 作者：haohulala

這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程，這個又是一個編程語言，?模版語法里面必不可少的一個，?也是使用業(yè)務(wù)場景使用最多的一個環(huán)節(jié)。所以學(xué)會使用循環(huán)也是重中之重了

以往我寫前端頁面的時候都是使用theamleaf模板引擎，模板引擎的原理其實就是服務(wù)端進(jìn)行頁面的渲染，這里需要說一下，渲染的意思實際上就是將相應(yīng)的數(shù)據(jù)變成html標(biāo)簽，比如我們使用了 th:each 標(biāo)簽，那么在服務(wù)端，就會用for循環(huán)將數(shù)據(jù)裝填成html代碼。

那么我們也可以使用vue框架進(jìn)行頁面渲染，使用vue進(jìn)行渲染的話，后端只需要將json字符串傳給前端，然后前端拿到數(shù)據(jù)后在瀏覽器端進(jìn)行渲染，實際上就是使用了客戶端的資源進(jìn)行頁面渲染，這樣子做可以減輕服務(wù)端的壓力。當(dāng)請求量很小的時候看不出來減輕了什么壓力，但是當(dāng)請求量很大的時候，就能節(jié)省很多計算資源。

使用vue還有一個好處就是可以采用前后端分離的方式開發(fā)，前端只需要關(guān)心后端傳什么樣格式的數(shù)據(jù)就行了。在使用了vue后感覺確實會比theamleaf的方式好一點，至少代碼清爽一點。

下面就展示使用vue處理循環(huán)的一個例子，首先聲明，這個例子使用的是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"  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="請輸入要搜索的關(guān)鍵詞">
                            </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>
                    <!-- 這一行顯示標(biāo)簽 -->
                    <div style="color: #000000">文章標(biāo)簽：<span style="color: #000000; margin-left: 10px">{{item.tag}}</span></div>
                    <!-- 下面一行顯示發(fā)表時間，閱讀數(shù)和收藏數(shù) -->
                    <div>
                        <div style="color: #000000">發(fā)表時間：<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事務(wù)詳解",
                        "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動態(tài)獲取表頭和列表數(shù)據(jù)示例",
                        "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實現(xiàn)表格行拖拽，列拖拽等表格操作 -----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數(shù)據(jù)表格實現(xiàn)重載數(shù)據(jù)表格功能(搜索功能）",
                        "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事務(wù)詳解與使用",
                        "u_id": 69,
                        "up_time": "2022-05-05",
                        "url": "https://blog.csdn.net/weixin_45477086/article/details/122234635"
                    }],
                code : 200
            }
        }
    }).mount("#app");
</script>
</html>

上面的例子中已經(jīng)將數(shù)據(jù)都放到代碼里面了，用來模擬后端向前端發(fā)送數(shù)據(jù)。

需要注意的一點是，我們的js代碼需要寫在待渲染的html代碼后面，因為瀏覽器是從上到下讀代碼的，如果你將js代碼寫在前面，那么就會找不到待綁定html標(biāo)簽。

上述代碼可以直接在瀏覽器中運行，你可以結(jié)合運行結(jié)果來理解vue的簡單使用方法。

到此這篇關(guān)于Vue處理循環(huán)數(shù)據(jù)流程示例精講的文章就介紹到這了,更多相關(guān)Vue處理循環(huán)數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: