用服务器端的VUE动态过滤列表比您更容易。

本文展示了一种令人惊讶的简单方法，用于使用vue.js和服务器端渲染动态过滤列表，从而避免了额外的AJAX请求的性能。初始HTML不是通过AJAX获取数据，而是渲染的服务器端（在此示例中使用WordPress，但适用于其他CMS（例如CRAFTCMS），VUE.JS使用v-if指令和Inline JavaScript在服务器生成的HTML中处理过滤客户端。

作者的灵感来自于文物会议上有关可访问性和现场性能的讨论。关键的见解是在快速的用户体验与有效的开发实践之间取得平衡。一种常见的方法涉及使用JavaScript框架在AJAX请求后处理过滤，但这在内容出现之前引入了延迟。

改进的方法利用现有的服务器端渲染功能。滤波器UI（WordPress示例中使用PHP的get_terms()函数创建）放置在后循环上方。每个过滤器按钮都使用vue.js指令（ @click和:class ）更新VUE变量（ tag ）并在视觉上指示活动过滤器。

解决方案的核心在于后循环。每个帖子都是使用v-if指令进行有条件渲染的，该指令检查帖子的标签是否（通过PHP的wp_get_post_tags()获得，并编码为JSON）包括当前选择的标签（ tag变量）。如果未选择标签，则显示所有帖子。

然后初始化一个最小的vue.js实例：

新Vue（{
  EL：'#filterableposts'，
  数据： {
    '标签'： ''
  }
}）;

这将VUE实例连接到包含帖子的HTML元素。不需要复杂的数据获取；过滤逻辑直接在服务器渲染的HTML上运行。

本文提供了完整的代码示例，包括WordPress模板集成，演示了如何实施此技术。它还包括有关添加aria-live属性以提高可访问性的奖励部分，为辅助技术用户提供了有关过滤帖子数量的实时反馈。最后，它提供了一个编码链接链接以进行工作演示。

以上是用服务器端的VUE动态过滤列表比您更容易。的详细内容。更多信息请关注PHP中文网其他相关文章！