thymeleaf、vue、element

254 阅读1分钟

​在js中获取值:

"[[${webDomain}]]"

  /* 在js中获取,也可以用中括号,但需要用''引起来避免编译报错 */
  <script>
   let web_domain="[[${webDomain}]]";
   export default {
         data(){
           return {
             message: '[[${message}]]'
         }
   }
   </script>
  
   

​​

动态class写法: v-bind不能省略

th:v-bind:class="|方法名('${后端变量}')|"

<i th:v-bind:class="|judgeActive('${productFeatureVO.feature}')!=-1?
'downArrow2':'downArrow1'|"></i>

el-timeline-item时间轴写法:

 <el-timeline-item
            th:each="tkBrandInfoBO:${tkBrandVO.tkBrandInfoBOS}"
            th:timestamp="${tkBrandInfoBO.infoTitle}"
            icon="../../../static/images/brand_timeline.png"
            color="#ff7e00"
            placement="top"
 >
     <div th:utext="${tkBrandInfoBO.introduction}"></div>
 </el-timeline-item>

绑定事件的写法:

​th:v-on:click="| |"

使用th:v-on:"| |" 或者th:@click="| |"

 <ul class="category-ul">
          <li
            th:each="paymentCategory:${paymentMethodPageVO.paymentCategories}"
            th:v-on:click="|clickli('${paymentCategory.index}')|"
            th:item-index="${paymentCategory.index}"
          >
               <div th:v-bind:class="selectIndex===${paymentCategory.index}?'active':''" 
                    th:text="${paymentCategory}" >
               <div>
          </li>
 </ul>