中原彼得堡航空学院网站的建设,开锁公司网站建设,做网站前期需要什么,网站建设的软件是哪个好文章目录 textareathymeleaf1.基础使用2.代码块的切换3.链接表达式1#xff09;范例 4.前后端5.遍历1.th:each2.th:switch3.添加属性 组件替换 每周总结 textarea -webkit-scrollbar#xff1a;width#xff1a;0#xff1b;让滚动条隐藏#xff0c;宽度为0 resize#x… 文章目录 textareathymeleaf1.基础使用2.代码块的切换3.链接表达式1范例 4.前后端5.遍历1.th:each2.th:switch3.添加属性 组件替换 每周总结 textarea -webkit-scrollbarwidth0让滚动条隐藏宽度为0 resizenone 禁止textarea可以手动拉伸 overflow-yvisible 长度伸展可视 .reply-text {overflow-y: visible;::-webkit-scrollbar {width: 0;}resize: none;outline: none;font-size: 20px;border-radius: 5px;border: 1.2px solid #f26026;width: 100%;min-height: 80px;margin-bottom: 10px;}通过监听input实时判断是否有内容输入若无内容输入则按钮禁点 this.style.height “inherit”; this.style.height ${this.scrollHeight}px 让文本框长度随输入内容的长度改变而改变 textarea.addEventListener(input, function (e) {if (textarea.value ) {replyBtn.setAttribute(disabled, true);replyBtn.classList.add(disable);} else {replyBtn.removeAttribute(disabled);replyBtn.classList.remove(disable);}this.style.height inherit;this.style.height ${this.scrollHeight}px;
});限制输入字数 textarea.onkeyup function () {let ddl document.querySelector(.ddl);let str textarea.value;ddl.innerHTML 还可输入${100 - textarea.value.length}字;if (textarea.value.length 100) {ddl.innerHTML 还可输入0字;textarea.value textarea.value.substr(0, 100);}
};thymeleaf
1.基础使用
● th:text 设置当前元素的文本内容相同功能的还有th:utext两者的区别在于前者不会转义html标签后者会。优先级不高order7 ● th:value设置当前元素的value值类似修改指定属性的还有th:srcth:href。优先级不高order6 ● th:each遍历循环元素和th:text或th:value一起使用。注意该属性修饰的标签位置详细往后看。优先级很高order2 ● th:if条件判断类似的还有th:unlessth:switchth:case。优先级较高order3 ● th:insert代码块引入类似的还有th:replaceth:include三者的区别较大若使用不恰当会破坏html结构常用于公共代码块提取的场景。优先级最高order1 ● th:fragment定义代码块方便被th:insert引用。优先级最低order8 ● th:object声明变量一般和*一起配合使用达到偷懒的效果。优先级一般order4 ● th:attr修改任意属性实际开发中用的较少因为有丰富的其他th属性帮忙类似的还有th:attrappendth:attrprepend。优先级一般order5
用 | | 进行字符串的拼接 类似于es6中的反引号 !DOCTYPE html
!--名称空间--
html langen xmlns:thhttp://www.thymeleaf.org
head
meta charsetUTF-8
titleThymeleaf 语法/title
/head
body
h2ITDragon Thymeleaf 语法/h2
!--th:text 设置当前元素的文本内容常用优先级不高--p th:text${thText} /
p th:utext${thUText} /!--th:value 设置当前元素的value值常用优先级仅比th:text高--
input typetext th:value${thValue} /!--th:each 遍历列表常用优先级很高仅此于代码块的插入--
!--th:each 修饰在div上则div层重复出现若只想p标签遍历则修饰在p标签上--
div th:eachmessage : ${thEach} !-- 遍历整个div-p不推荐--
p th:text${message} /
/div
div !--只遍历p推荐使用--
p th:text${message} th:eachmessage : ${thEach} /
/div!--th:if 条件判断类似的有th:switchth:case优先级仅次于th:each, 其中#strings是变量表达式的内置方法--
p th:text${thIf} th:if${not #strings.isEmpty(thIf)}/p!--th:insert 把代码块插入当前div中优先级最高类似的有th:replaceth:include~{} 代码块表达式 --
div th:insert~{grammar/common::thCommon}/div!--th:object 声明变量和*{} 一起使用--
div th:object${thObject}
pID: span th:text*{id} //p!--th:text${thObject.id}--
pTH: span th:text*{thName} //p!--${thObject.thName}--
pDE: span th:text*{desc} //p!--${thObject.desc}--
/div/body
/html
2.代码块的切换
!--th:fragment定义代码块标识--
footer th:fragmentcopycopy; 2011 The Good Thymes Virtual Grocery
/footer!--三种不同的引入方式--
div th:insertfooter :: copy/div
div th:replacefooter :: copy/div
div th:includefooter :: copy/div!--th:insert是在div中插入代码块即多了一层div--
divfootercopy; 2011 The Good Thymes Virtual Grocery/footer
/div!--th:replace是将代码块代替当前div其html结构和之前一致--
footercopy; 2011 The Good Thymes Virtual Grocery
/footer!--th:include是将代码块footer的内容插入到div中即少了一层footer--
divcopy; 2011 The Good Thymes Virtual Grocery
/div
3.链接表达式
无参{/xxx} 有参{/xxx(k1v1,k2v2)} 对应url结构xxx?k1v1k2v2 引入本地资源{/项目本地的资源路径} 引入外部资源{/webjars/资源在jar包中的路径}
link th:href{/webjars/bootstrap/4.0.0/css/bootstrap.css} relstylesheet
link th:href{/main/css/itdragon.css} relstylesheet
form classform-login th:action{/user/login} th:methodpost
a classbtn btn-sm th:href{/login.html(lzh_CN)}中文/a
a classbtn btn-sm th:href{/login.html(len_US)}English/a
1范例 注意{/。。。}大括号里边要用 / 开头表示根目录不然渲染不到
4.前后端 通过th:object 可直接引用变量
!--原始 --
h2 th:text${user.username}/h2
p th:text${user.age}/p
!-- 代码优化 --
div th:object${user}h2 th:text*{username}/h2p th:text*{age}/p
/div若语句为true则会显示标签中的内容“会员”
5.遍历
1.th:each 2.th:switch 3.添加属性
追加一个active属性 给最后一个元素追加属性stat是自定义名字
组件替换 也可以直接使用id不用thfragment
每周总结
项目写的好累头懵的快炸了
