溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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處理循環數據流程的代碼怎么寫”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
