这篇文章主要介绍了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://www.19jp.com">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="https://www.19jp.com">
上面的例子中已经将数据都放到代码里面了,用来模拟后端向前端发送数据。
需要注意的一点是,我们的js代码需要写在待渲染的html代码后面,因为浏览器是从上到下读代码的,如果你将js代码写在前面,那么就会找不到待绑定html标签。