vue渲染的数据是html片段的时候，怎么处理

最近的项目里面需要做一个制作微信页面的功能，涉及到元素的选择

侧边栏是选择需要的模块，对应中间的方框会出现该模块下所有的子模块，所以需要的数据是一段html代码。
其中我走了很多弯路，先贴出正确的代码
html部分
<div class="grid-content bg-purple">
<div class="previewBox">
<div class="secBox">
<ul ref="ul">

          </ul>
        </div>
      </div>
    </div>

js部分
selectType:function(e){
console.log(e.target.innerText)
this.selectData=[]
console.log(this.localData)
if(e.target.innerText=="标题"){
this.selectData=this.localData.标题;
}else if(e.target.innerText=="正文"){
this.selectData=this.localData.正文;
}else if(e.target.innerText=="图文"){
this.selectData=this.localData.图文;
console.log()
}
let liNum=this.refs.ul)
let content=''
for(let i=0;i<this.selectData.length;i++){
content+='<li>'+this.selectData[i]+'</li>'
console.log(content)
}
liNum.innerHTML=content
// console.log(selectData)
},
中间的一段代码if else的逻辑有点浪费代码，但是找不到更好的解决方案，我有想过直接用一个变量接着e.target.innerText，但是this.localData.变量，会出现undefined,因为变量的类型不对，如果你有更好的方法可以帮忙指出来一下。

（记录一下我的弯路，一开始我想的是直接在页面里面ul 下面的li v-for渲染出来，接口打印一堆代码的字符串，应该用v-html,这一瞬间我想到了这个，还是写点东西更能回忆出更好的解决方案啊。。。。）