从vuejs中呈现原始html

我已经这样做了，但是我需要将我的“{data.body}}”解释为HTML

我完全是个新手，我希望有人能帮我

到目前为止，我在看名为v-html的指令时把头撞在了数字墙上。。。但我不确定这是不是我应该用的

我也看到人们做过类似的事情：

Vue.component（“应用程序”{ 模板：

HTML

这可能是我需要的

请给我指出一个解决方案：）

newvue({
el:“#magiccardapp”，
数据：{
留言：“你好”，
选项卡：{
“标题1”：{
副标题：“这里有一些文字”，
标题：“很棒的标题”，
正文：“Lorem ipsum，dolor sit amet Concertetur Adipiscing Elite.Ab nam alias Architector of officia，dolores animi qui debitis incident eius temporibus nostrum nihil solutiona commodi molecties requirements ducimus amet.Suscipit，saepe！”，
img_1:'https://placedog.net/320/180/?random',
img_2:'https://placedog.net/320/180/?random'
},
“标题2”：{
字幕：“这里有一些很酷的文字”，
标题：“这太棒了”，
正文：“Lorem Ipsasdfasd alias Architector to officia，dolores animi qui debitis incident eius temporibus nostrum nihil solutiona commodi molectia requisities ducimus amet.Suscipit，saepe！”，
img_1:'https://placedog.net/320/180/',
img_2:'https://placedog.net/320/180/'
},
“标题3”：{
字幕：“这里有一些史诗般的文字”，
标题：“看，我是一个标题！”，
正文：“Lorem ipsum，dolor sit amet Concertetur Adipising Elite.Ab nam aliasdfasdfaas Architector to officia，dolores animi qui debitis incident eius Temporary ibus nostrum nihil Solutiona commodi Molectia Essentials ducimus amet.Suscipit，saepe！”，
img_1:'https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-320-80.jpg',
img_2:'https://aldf.org/wp-content/uploads/2018/06/sad-dog-1846066_1920-320x180.jpg'
},
“标题4”：{
副标题：“此处有其他文字”，
标题：“LOREM IPSUM？”，
正文：“Lorem ipsum，dolor sit amet Concertetur Adipiscing Elite.Ab nam alias Architector of officia，dolores animi qui debitis incident eius temporibus nostrum nihil solutiona commodi molecties requirements ducimus amet.Suscipit，saepe！”，
img_1:'https://cdn.mos.cms.futurecdn.net/QjuZKXnkLQgsYsL98uhL9X-320-80.jpg',
img_2:'https://aldf.org/wp-content/uploads/2018/06/sad-dog-1846066_1920-320x180.jpg'
},
},
activeTab:“标题1”，
},
计算：{
tabContent（）{
返回this.tabs[this.activeTab]；
},
},
方法：{
设置选项卡活动（选项卡）{
this.activeTab=tab；
}
},
组成部分：{
“TabContent”：{
道具：{
数据：对象，
},
}
},
})

/*选项卡*/
魔幻甲板{
显示：网格；
网格模板列：重复（自动拟合，最小值（250px，1fr））；
网格间距：1rem 1rem；
对齐项目：居中；
最大宽度：1000px；
填充：1rem1rem；
字体系列：“开放式SAN”，
无衬线；
文本对齐：居中；
}
魔术师：悬停{
转换：标度（1.05）；
边界半径：0.25雷姆；
溢出：隐藏；
过渡：1s；
-webkit转换：1s；
}
.线路{
高度：2倍；
宽度：100%；
保证金：自动；
背景色：#c38e3d；
}
魔术师{
背景：幽灵白；
边界半径：0.25雷姆；
溢出：隐藏；
过渡：1s；
-webkit转换：1s；
光标：指针；
身高：100%；
颜色：黑色；
边框：0.3rem实心#c38e3d；
高度：最大含量；
滤光片：亮度（50%）；
}
魔术师：悬停{
滤光片：亮度（100%）；
}
magiccard.active{
光标：未设置；
转换：标度（1.05）；
滤光片：亮度（100%）；
}
magiccard h3{
证明内容：中心；
字母间距：4px；
边际：0px；
颜色：黑色；
字体大小：400；
字体大小：20px；
线高：90%；
左：0%；
垫面：3%；
垫底：3%；
边界半径：20px；
}
magiccard p{
线高：1.6；
}
/*底部*/
部分{
字体系列：“开放式SAN”，
无衬线；
字号：800；
颜色：鬼白色；
字体大小：12px；
}
#工作网格{
填充：1rem1rem；
最大宽度：1000px；
自我辩护：中心；
}
工作室{
显示：网格；
网格模板列：1fr；
网格模板行：1fr；
边框：0.3rem实心#c38e3d；
边界半径：0.5雷姆；
背景：幽灵白；
填充：1rem2rem；
网格模板区域：
“文本”
‘img’；
}
@介质（最小宽度：800px）{
工作室{
网格模板柱：3fr 1fr；
网格模板区域：
“文本img”；
}
工作区说明{
右边框样式：凹槽；
右：2%；
}
车间{
左：1rem；
}
}
@介质（最大宽度：799px）{
工作区框{}
工作区说明{
边框底部样式：凹槽；
}
车间{
垫面：1毫米；
}
}
.工作区文本{
网格面积：1/1/2/2；
网格区域：文本；
边际：0px；
颜色：黑色；
字体大小：400；
字体大小：15px；
线高：100%；
垫面：3%；
垫底：2%；
}
工作区说明{
网格面积：1/1/2/2；
网格区域：文本；
边际：0px；
颜色：黑色；
字体大小：400；
字体大小：15px；
线高：100%；
垫面：3%；
垫底：2%；
}
工作区说明h1{
线高：初始；
}
车间{
网格面积：1/2/2/3；
网格面积：img；
显示：网格；
网格间距：1rem；
颜色：黑色；
对齐内容：居中对齐；
/*左边框：1px实心*/
证明内容：中心；
}
/*过渡*/
。淡入激活状态>*，
.淡入淡出激活状态>*{
过渡时间：200ms；
过渡属性：不透明度、变换；
过渡计时功能：立方贝塞尔（0.6,0.15,0.35,0.8）；
}
.fade输入>*，
.淡出至>*{
不透明度：0；
变换：translateY（4
<p v-html="data.body"></p>