学习笔记 theymleaf的代码复用 vue的数据绑定

最新推荐文章于 2023-05-26 20:13:40 发布

okludawei

最新推荐文章于 2023-05-26 20:13:40 发布

阅读量178

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/okludawei/article/details/115747593

版权

学习笔记专栏收录该内容

54 篇文章 0 订阅

订阅专栏

数据绑定，引入thyemleaf:

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>

引入必要的样式和JS

<title>稻草FAQ首页</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<script src="/bower_components/polyfill/dist/polyfill.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/polyfill/dist/polyfill.min.js"></script>
<script src="bower_components/vue/dist/vue.js"></script>
</head>

thyemleaf的数据绑定th:fragment="fragment"，引入标签的导航栏

<div class="container-fluid" th:fragment="tags_nav" >
<div class="nav font-weight-light" id="tagsApp">
    <a href="tag/tag_question.html" class="nav-item nav-link text-info"><small>全部</small></a>
    
    <a href="tag/tag_question.html"
       class="nav-item nav-link text-info"
       v-for="tag in tags">
       <small v-text="tag.name">Java基础</small>
    </a>
</div>
</div>

数据复用，在question文件夹下的creat.html,fragment在文件夹外，和文件夹同目录

<div class="container-fluid" th:replace="index::tags_nav" >
<div class="nav font-weight-light">
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>全部</small></a>
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Java基础</small></a>
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Java OOP</small></a>
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Java SE</small></a>
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>WebServer</small></a>
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>二进制</small></a>
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Web</small></a>
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>MySQL</small></a>
    <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Servlet</small></a>
</div>
</div>

okludawei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记 theymleaf的代码复用 vue的数据绑定

数据绑定，引入thyemleaf:<!DOCTYPE html><html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"><head>引入必要的样式和JS <title>稻草FAQ首页</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css...
复制链接

扫一扫