使用vue处理循环数据

以往我写前端页面的时候都是使用theamleaf模板引擎，模板引擎的原理其实就是服务端进行页面的渲染，这里需要说一下，渲染的意思实际上就是将相应的数据变成html标签，比如我们使用了 th:each 标签，那么在服务端，就会用for循环将数据装填成html代码。

那么我们也可以使用vue框架进行页面渲染，使用vue进行渲染的话，后端只需要将json字符串传给前端，然后前端拿到数据后在浏览器端进行渲染，实际上就是使用了客户端的资源进行页面渲染，这样子做可以减轻服务端的压力。当请求量很小的时候看不出来减轻了什么压力，但是当请求量很大的时候，就能节省很多计算资源。

使用vue还有一个好处就是可以采用前后端分离的方式开发，前端只需要关心后端传什么样格式的数据就行了。在使用了vue后感觉确实会比theamleaf的方式好一点，至少代码清爽一点。

下面就展示使用vue处理循环的一个例子，首先声明，这个例子使用的是vue3的语法，vue3和vue2的语法稍微有亿点点不同，使用的时候需要注意一下。

纳米搜索
搜索
{{item.title}}{{item.url}}文章作者：{{item.author_name}}文章标签：{{item.tag}}发表时间：{{item.up_time}}阅读量：{{item.read_volum}}收藏量：{{item.collection_volum}}

上面的例子中已经将数据都放到代码里面了，用来模拟后端向前端发送数据。

需要注意的一点是，我们的js代码需要写在待渲染的html代码后面，因为浏览器是从上到下读代码的，如果你将js代码写在前面，那么就会找不到待绑定html标签。

上述代码可以直接在浏览器中运行，你可以结合运行结果来理解vue的简单使用方法。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！