zoukankan      html  css  js  c++  java
  • thymeleaf:总结

    Thymeleaf定义:Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text.

    Thymeleaf可以处理的模板类型有:HTML XML TEXT JAVASCRIPT CSS RAW

    Thymeleaf的方言简单易用,且不会破坏HTML的结构,这项特性被称为自然模板。

    假如采用SpringMVC渲染Thymeleaf视图,一个简易的视图文件home.html文件:

    <!DOCTYPE html>
    
    <html xmlns:th="http://www.thymeleaf.org">
    
      <head>
        <title>Good Thymes Virtual Grocery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" media="all" 
              href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
      </head>
    
      <body>
      
        <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
        
        <p>Today is: <span th:text="${today}">13 February 2011</span></p>
      
      </body>
    
    </html>

    这个 xmlns:th="http://www.thymeleaf.org" 并不是h5中的元素,这个对整个模板的渲染并没有任何影响,但是在可以避免IDE在解释 th:* 属性缺失时报错。 也可以用 data- 前缀和 短横线 - 来替换冒号 : 这样就 th:text 可以变成 data-th-text 

    取变量的值是采用 ${ }

    遍历list的语法是 th:each

        <table>
          <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
          </tr>
          <tr th:each="prod : ${prods}">
            <td th:text="${prod.name}">Onions</td>
            <td th:text="${prod.price}">2.41</td>
            <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
          </tr>
        </table>

    END

  • 相关阅读:
    2016.5.11_经典试题-回文算法【ABAP】
    shell基础知识
    python笔记2
    python笔记1
    vmware rdm
    网页中图片显示方向与实际图片方向不一致
    vue 弹性布局 实现长图垂直居上,短图垂直居中
    IE10 解决input file 同一文件不触发onchange事件
    04. pt-deadlock-logger
    03. pt-config-diff
  • 原文地址:https://www.cnblogs.com/colin220/p/10432035.html
Copyright © 2011-2022 走看看