zoukankan      html  css  js  c++  java
  • Thymeleaf

    1,模板页面的html上需要声明Thymeleaf的命名空间,<html xmlns:th="http://www.thymeleaf.org">

    2,文本标签 th:text/th:utext

      th:text进行文本替换,不会解析html

        <p th:text="text标签: + ${msg}"></p>

      结果页面

        <p>text标签:<h1>我是h1</h1></p>

      浏览器访问效果

        

       th:utext进行文本替换,会解析html

        <p th:utext="utext标签: + ${msg}"></p>

      浏览器访问效果

        

     2,字符串拼接

      ①模板页面

        <p th:text="${a}+${b}"></p>

       结果页面

        <p>3</p>

      ②模板页面

        <p th:text="|${a} ${b}|"></p>

       结果页面

        <p>1 2</p>

      ③模板页面

        <p th:text="${a} > ${b}"></p>

         结果页面

        <p>false</p>

      ④模板页面

        <p th:text="!${flag}"></p>

        结果页面

        <p>false</p>

    3,${...}表达式

      ①模板代码

        <p th:text="${user.name}"></p>

        <p th:text="${user.age}"></p>

       结果页面

        <p>ljk</p><p>18</p>

    4,@{...}链接网址表达式

      一般和th:herf、th:src进行结合使用,用于显示Web应用中的URL链接,通过@{...}表达式               Thymeleaf 可以帮助我们拼接上web应用访问的全路径,同时我们可以通过()进行参数的拼接

      ①模板代码

        <img th:src="@{/images/gtvglogo.png}" />

       结果页面

        <img src="/sbe/images/gtvglogo.png">

      ②模板代码

        <a th:href="@{/product/comments(prodId=${prod.id})}" >查看</a>

          结果页面

        <a href="/sbe/product/comments?prodId=2">查看</a>

      ③模板代码

         <a th:href="@{/product/comments(prodId=${prod.id},prodId2=${prod.id})}" >查看</a>

          结果页面

        <a href="/sbe/product/comments?prodId=2&amp;prodId2=2">查看</a>

      

    5,条件判断 th:if/th:unless

      th:if 当条件为true则显示

      th:unless当条件为false则显示

      ①模板页面

        <p th:if="${flag}">if判断</p>

       结果页面

        <p>if判断</p>

      ②模板页面

        <p th:unless="!${flag}">unless 判断</p>

       结果页面

        <p>unless 判断</p>

    6,switch

      th:switch,完成类似的条件表达式的操作

      模板页面

        <div th:switch="${user.name}">

          <p th:case="'ljk'">User is ljk</p>

          <p th:case="'ljk2'">User is ljk2</p>

        </div>

      结果页面

        <div><p> User is ljk</p></div>

    7,for循环

      th:each遍历集合

      模板页面

     <table>
          <thead>
            <tr>
              <th>用户名称</th>
              <th>用户年龄</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="user : ${userList}" th:class="${userStat.odd}? 'odd'">
              <td th:text="${user.name}">Onions</td>
              <td th:text="${user.age}">2.41</td>
            </tr>
          </tbody>
        </table>
    ----------------------------------------------------------------------
        <table>
          <thead>
            <tr>
              <th>用户名称</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="str : ${strList}" th:class="${strStat.odd}? 'odd'">
              <td th:text="${str}">Onions</td>
            </tr>
          </tbody>
        </table>

     结果页面

    8,th:href

      用于声明在a标签上的href属性的链接 该语法会和@{...}表达式一起使用

      模板代码

        <a href="../home.html" th:href="@{/}">返回首页</a>

      结果页面

        <a href="/sbe/">返回首页</a>

    9,th:class

      用于声明在标签上class属性信息

      模板页面

        <p th:class=" 'even'? 'even' : 'odd'" th:text=" 'even'? 'even' : 'odd'"></p>

      结果页面

        <p class="even">even</p>

    10,th:attr

      用于声明html中或自定义属性信息

      模板页面

        <img th:attr="src=@{/images/gtvglogo.png}" />

      结果页面

        <img src="/sbe/images/gtvglogo.png">

    11,th:value

      用于声明html中value属性信息

      模板页面

         <input type="text" th:value="${name}" />

      结果页面

        <input type="text" value="ljk">

    12,th:action

      用于声明html from标签中action属性信息

      模板页面

        <form action="subscribe.html" th:action="@{/subscribe}">

          <input type="text" name="name" value="abc"/>

        </form>

      结果页面

        <form action="/sbe/subscribe">

          <input type="text" name="name" value="abc">

        </form>

    13,th:id

      用于声明html id属性信息

      模板页面

        <p th:id="${id}"></p>

      结果页面

        <p id="123"></p

    14,th:onclick

      用于声明html 中的onclick事件

      模板页面

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function showUserInfo(){
            alert("i am zhuoqianmingyue!")
        }
    </script>
    </head>
    <body>
       <p th:onclick="'showUserInfo()'">点我</p>
    </body>
    </html>

    结果页面

    <p onclick="showUserInfo()">点我</p>

    15,th:selected

      用于声明html 中的selected属性信息

      模板页面

    <select>
        <option name="sex"></option>
        <option th:selected="1 == ${sex}">男</option>
        <option th:selected="0 == ${sex}">女</option>
    </select>

      结果页面

    <select>
    <option name="sex"></option>
        <option selected="selected">男</option>
        <option>女</option>
    </select>

    16,th:src

      用于声明html 中的img中src属性信息

      模板页面

        <img title="GTVG logo" th:src="@{/images/gtvglogo.png}" />

      结果页面

        <img title="GTVG logo" src="/sbe/images/gtvglogo.png">

    17,th:style

      用于声明html中的标签css的样式信息

      模板页面

        <p th:style=" 'display:' + @{(${isShow} ? 'none' : 'block')} + ''"></p>

      结果页面

        <p style="display:none"></p>

    18,Elvis运算符

      Elvis运算可以理解成简单的判断是否为 null 的三元运算的简写,如果值为 null 则显示默认值,如果不为 null ,则显示原有的值

      模板页面1

         <p>Age: <span th:text="${age}?: '年龄为null'"></span></p>

      结果页面1

        <p>Age: <span>年龄为null</span></p>

      模板页面2

        <p>Age2: <span th:text="${age2}?: '年龄为null'"></span></p>

      结果页面2

        <p>Age2: <span>18</span></p>

    19,三元表达式

      使用方法是在th:x 中通过 表达式?1选项:2选项

      模板页面1

        <p th:class=" 'even'? 'even' : 'odd'" th:text=" 'even'? 'even' : 'odd'"></p>

      结果页面1

        <p class="even">even</p>

      模板页面2

        <p th:value="${name eq 'ljk' ? '帅哥':'丑男'}" th:text="${name eq 'ljk' ? '帅哥':'丑男'}"></p>

      结果页面2

        <p value="帅哥">帅哥</p>

      条件表达式操作字符

    gt:great than(大于)
    ge:great equal(大于等于)
    eq:equal(等于)
    lt:less than(小于)
    le:less equal(小于等于)
    ne:not equal(不等于)

    参考 https://www.w3xue.com/exp/article/20199/54847.html

  • 相关阅读:
    160726 smarty 笔记(2)
    160726 smarty 笔记(1)
    smarty内置函数
    smarty变量调节器
    smarty基础原理
    【Django】:基础
    【十八章】:Web框架
    汇总
    jQuery
    DOM
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/12200702.html
Copyright © 2011-2022 走看看