vue.js如何像jQuery一样动态加入html模板？？？

Question

    {if$user.user_id==0}
      <el-col :xs="6" :sm="5" :md="3" :lg="3" :xl="3">
          <div class="topuserbox">
            <div class="dla ndb">
              <history-wc></history-wc>
              <a class="updlbox" v-on:click="dlbox('dl')">登录</a> </div>
          </div>
        </el-col>
    {else}
      <el-col :xs="6" :sm="5" :md="3" :lg="3" :xl="3">
          <div class="topuserbox">
              <div class="dlhead">
              <div class="dlh">
                  <el-dropdown @command="handleCommand">
                      <span class="el-dropdown-link">
                        <a href="#"><img src="{$user.user_id|mac_get_user_portrait}" alt="mm"></a> </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="{:mac_url('user/index')}">会员中心</el-dropdown-item>
                      <el-dropdown-item command="{:mac_url('user/plays')}">历史观看</el-dropdown-item>
                      <el-dropdown-item command="{:mac_url('user/info')}">账户安全</el-dropdown-item>
                      <el-dropdown-item command="javascript:;" onclick="MAC.User.Logout()">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                </div>
              <div class="dlh" style="margin-right: 15px;">
                  <history-wc></history-wc>
                </div>
            </div>
            </div>
        </el-col>
    {/if}

以上是tp5框架语法，判断用户登录和未登录的两个状态，php动态情况下完美，生成静态后就尴尬了。
借助如jQuery动态识别两种状态加入HTML到元素中，也能实现。

if(MAC.Cookie.Get('user_id') !=undefined && MAC.Cookie.Get('user_id')!=''){
                var user_html='<div class="dla ndb"><history-wc></history-wc><a class="updlbox" v-on:click="dlbox(\'dl\')">登录</a> </div>';
                console.log("已登录")
            }else{
                console.log("未登录")
                var user_html='<div class="dlhead"><div class="dlh"><el-dropdown @command="handleCommand"><span class="el-dropdown-link"><a href="#"><img src="{$user.user_id|mac_get_user_portrait}"alt="mm"></a></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="{:mac_url('user/index')}">会员中心</el-dropdown-item><el-dropdown-item command="{:mac_url('user/plays')}">历史观看</el-dropdown-item><el-dropdown-item command="{:mac_url('user/info')}">账户安全</el-dropdown-item><el-dropdown-item command="javascript:;"onclick="MAC.User.Logout()">退出</el-dropdown-item></el-dropdown-menu></el-dropdown></div><div class="dlh"style="margin-right: 15px;"><history-wc></history-wc></div></div>';
            };

但是问题是目前环境是vue.js，以上直接html()到元素中，由于是vue语法直接不解析。

请问在vue语法下如何实现这种更具某个变量的false或者true来输出不同模板到页面中，并且vue能够解析？？？

Answer 1

直接借助vue的模板语法即可

<template>
  <div>
    <div class="dla ndb" v-if="user_id">
      <!--html -->
    </div>
    <div class="dlhead" v-else>
      <!--html -->
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        user_id: '',
      };
    },

Answer 2

<div v-html="html代码"></div>