Vue+ Thymeleaf 使用总结

环境Vue+Thymeleaf

说明:后端使用Model向前端页面传递数据

1 th:each=“addr:${address}”

• th:each 遍历
• addr 遍历的每一个元素 如一个实体对象
• @{address} 后端传递的集合等

2 th:text="${addr.address}"

• th:text 文本框
• ${addr.address} 对象中的一个属性

3 th:if="${addr.address}==‘wh’ "

• th:if 判断,为true显示 ; false不显示
  e.g

<!-- 
当addr的address属性=='wh'时,才会显示  默认地址
-->
<span class="base" th:if="${addr.address}== 'wh'">默认地址</span>

4 th:classappend=""

• th:classappend 类属性追加 ,一般加条件判断一起用
  e.g

<!-- 
当addr的isDefault==1时,div的class="con name selected"  
否则,class="con name"
-->
<div class="con name " th:classappend="${addr.isDefault}==1?'selected':''"></div>

5 th:@click="| add() |"

• th:@click 绑定单击事件,要求:方法左右添加 |
• e.g

<!-- 方法中参数可为 实体类属性 -->
 <div th:@click="|chooseAddr('${addr.address}')|"></div>

<!-- 通过单击事件 给属性赋值 -->
<li>th:@click="|order.payType=1|" </li>

6 th:src="${cart.image}"

• th:src <img>标签中链接

7 href=“javascript:void(0)”

• <a> 标签中禁止使用href超链接

8 Vue中 app.$set(p1,p2,p3)

• .$set 表示赋值操作
• p1 目标(什么地方)
• p2 key值
• p3 value值

<script th:inline="javascript">
    var app = new Vue({
     
     
        el: "#app",
        data: {
     
     
            order: {
     
     
                'Contact': [[${
     
     deAddr.contact}]],
                'Mobile': [[${
     
     deAddr.phone}]],
                'Address': [[${
     
     deAddr.address}]],
                'payType': 1,
            },//用户提交的订单信息
        },
        methods: {
     
     
/* $set表示赋值操作
* param1 什么地方 param2 key值  param3 value值
*/
    chooseAddr: function (contact, mobile, address) {
     
     
       app.$set(app.order, 'Contact', contact);
       app.$set(app.order, 'Address', address);
       app.$set(app.order, 'Mobile', mobile);
            },  
    })
</script>

Vue中源码片段:

/**
 * Set a property on an object. Adds the new property and
 * 在对象上设置属性. 如果属性目前不存在,新增一个属性和触发器(事件)更改通知
 * triggers change notification if the property doesn't
 * already exist.
 */
function set (target, key, val) {
    
    
  if ("development" !== 'production' &&
    (isUndef(target) || isPrimitive(target)))
    ...
 }

9 th:inline

• th:inline 内联对象,值有三种：

  • text
  • javascript
  • none

• th:inline="text"文本内联

• th:inline="javascript"脚本内联 <script th:inline="javascript">

<!-- 在javascript访问model中的数据 -->
'receiveContact': [[${deAddr.contact}]]