鍍金池/ 問答/HTML5  HTML/ Es6的模板字符串 可以通過if判斷 去動態(tài)顯示信息嗎？

Es6的模板字符串 可以通過if判斷 去動態(tài)顯示信息嗎？

如圖 是一個模板 有時候想通過判斷 然后顯示或不顯示某些元素 name 再模板引擎中能進行 操作嗎？
還是說只能在渲染后 再通過js判斷隱藏顯示
又或者定義一個空變量進行拼接 然后判斷成功給空變量賦值？
有沒有更好的辦法？
圖片描述

回答
編輯回答
汐顏

ES6的模板字符串是可以嵌套任何表達式的，再套一個模板字符串都行。所以其實很直接：

`
<ul>
  <li>
    <span></span>
    ${ info.realname? '<span></span>' : '' }
    <span></span>
  </li>
</ul>
`

但是其實不推薦這樣做，因為DOM本身就應該是穩(wěn)定的/結構相似的，每個<li>的結構都不一樣，后面debug會爆炸。

所以我實際上推薦去設置style

`
<ul>
  <li>
    <span></span>
    <span ${ info.realname? 'class="hidden"' : '' }></span>
    <span></span>
  </li>
</ul>
`
2017年4月10日 07:43
編輯回答
貓館

info不存在，給info.realname = ''不就不顯示了，還是說不顯示對應的dom?

2017年3月25日 14:10
編輯回答
拼未來

可以使用IIFE

let html=`<div>
{
    (function(){
        if(XXXXXXXXX){
            return `XXXX`;
        }else{
            return '';
        }
    })()
}
</div>`
2017年4月5日 10:33