thymeleaf 的th:if 用原生html+javascript实现

完善版

整体思路是用javascript读取到值，然后根据值来判断，如果为真则删除掉一个div，如果为假就删除掉另一个div这样实现if。

一开始的thymeleaf页面

<div class="fr">
        <th:block th:unless="${session.newBeeMallUser==null}">
            <div class="user">
                <ul class="selector">
                    <li>
                        <a th:href="@{/personal}">
                            个人中心
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/orders}">
                            我的订单
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/logout}">
                            退出登录
                        </a>
                    </li>

                </ul>
                <a href="##" class="username">
                    <th:block th:text="${session.newBeeMallUser.nickName}"></th:block>
                    <i class="iconfont icon-down"></i>
                </a>
            </div>
            <div class="shopcart">
                <a th:href="@{/shop-cart}" style="color: white;"><i class="iconfont icon-cart"></i>
                    购物车(
                    <th:block th:text="${session.newBeeMallUser.shopCartItemCount}"></th:block>
                    )</a>
            </div>
        </th:block>

        <th:block th:if="${session.newBeeMallUser==null}">
            <ul class="login">
                <li><a th:href="@{/login}">登录</a></li>
                <li><a th:href="@{/register}">注册</a></li>
            </ul>
            <div class="shopcart">
                <a th:href="@{/login}" style="color: white;"><i class="iconfont icon-cart"></i>
                    购物车(0)</a>
            </div>
        </th:block>
</div>

转换之后

由于javascript是不能取出session里的值的，所以需要在上面先弄一个隐藏起来的p标签来让它取到session里的值，然后再在js代码里面取出p标签的值。

<p style="color: #333333" hidden="hidden" id="nickname">{$user.nick_name}</p>

html

<div id="z" class="fr">
    <div id="yes" class="fr">
        <div class="user">
            <ul class="selector">
                <li>
                    <a href="personal">
                        个人中心
                    </a>
                </li>
                <li>
                    <a href="my_orders">
                        我的订单
                    </a>
                </li>
                <li>
                    <a href="/index.php/admin/mall/loginout" >
                        退出登录
                    </a>
                </li>
            </ul>
                <p style="color: antiquewhite">
                    {$user.nick_name}
                </p>
                <i class="iconfont icon-down"></i>
        </div>

        <div class="shopcart">
            <a href="cart" style="color: white;"><i class="iconfont icon-cart"></i>
                购物车( )
            </a>
        </div>
    </div>
    
    <div id="no" class="fr">
        <ul class="login">
            <li><a href="login">登录</a></li>
            <li><a href="register">注册</a></li>
        </ul>
        <div class="shopcart">
            <a href="login" style="color: white;"><i class="iconfont icon-cart"></i>
                购物车(0)</a>
        </div>
    </div>
    <p style="color: #333333" hidden="hidden" id="nickname">{$user.nick_name}</p>
</div>

javascript

<script>
    window.onload = function(){

        var idn = document.getElementById("no");
        var idy = document.getElementById("yes");
        var value = document.getElementById("nickname").innerHTML;
        if(value){
            //就如果有这个用户名的话，应该把no删除
            document.getElementById("z").removeChild(idn);
        }
        else{
        	//就如果没有这个用户名的话，应该把yes删除
            document.getElementById("z").removeChild(idy);
        }
    }

</script>

这样就可以实现，但是有时候会卡，需要刷新一下。