Thymeleaf 的 th:attr 和 th:style 属性的使用

一、th:attr

设置标签属性,多个属性可以用逗号分隔
例:
1.后端接口:

@GetMapping(value = "/welcome")
public ModelAndView getWelcomeTitle() {
    ModelAndView modelAndView = new ModelAndView("welcome.html");
    modelAndView.addObject("attr1", "属性值1");
    modelAndView.addObject("attr2", "属性值2");
    return modelAndView;
  }

2.welcome.html:

只设置一个属性的情况: <p th:attr="attr1=${attr1}"></p>
页面实际解析为:<p attr1="属性值1"></p>
设置多个属性的情况:<p th:attr="attr1=${attr1}, attr2=${attr2} "></p>
页面实际解析为:<p attr1="属性值1" attr2="属性值2"></p>

二、th:style
设置标签样式,多个样式需要拼接
1.后端接口:

@GetMapping(value = "/welcome")
public ModelAndView getWelcomeTitle() {
ModelAndView modelAndView = new ModelAndView("welcome.html");
modelAndView.addObject("font-size", "100px");
modelAndView.addObject("font-weight", "700");
modelAndView.addObject("font-family", "courier");
return modelAndView;
}

2.welcome.html:

只设置一个属性的情况: <p th:style="'font-size:' + ${font-size}"></p>
页面实际解析为: <p th:style="font-size:100px"></p>
设置多个属性的情况: <p th:style="'font-size:' + ${font-size} + '; font-weight:' + ${font-weight}"></p>
页面实际解析为: <p th:style="font-size:100px; font-weight:700"></p>
也可以像这样追加一个:<p th:style="'font-size:' + ${font-size} + ';' + " th:styleappend ="'font-weight:' + ${font-weight}" ></p>
页面实际解析为:<p th:style="font-size:100px; font-weight:700"></p>
也可以像这样追加多个:<p th:style="'font-size:' + ${font-size} + ';'" th:styleappend ="'font-weight:' + ${font-weight} + '; font-family:' + ${font-family}" ></p>
页面实际解析为:<p th:style="font-size:100px; font-weight:700; font-family:courier"></p>

 

 

本站的文章多是老王开发工作中问题的记录,一个字一个字敲的,切实可行,可以分享,需要留个原文链接,至少也意思意思吧!
vsalw技术博客! » Thymeleaf 的 th:attr 和 th:style 属性的使用

每个人都是以自己独特的方式体味生活,或许别人不理解,但自己知道:其中的酸甜苦辣就叫做幸福!

认同! 瞎扯淡!