vue从后台获取的数据有html标签通过v-html渲染到页面给html添加样式的方法如下：
准备材料：Vue.js、HBuilder、浏览器
1、创建静态页面vhtml.html，并引入vue.js文件。
2、在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令。
3、绑定v-html指令数据，这里设置为字符串。
4、Vue.js库的v-html指令是插入html元素，修改datas为包含<p></p>标签。
5、预览该静态页面，这时会看到页面显示如下
6、将调试打开，这时发现<div></div>中有个<p></p>标签，完成添加。
你可以绑定 dom 元素的 class 属性，但是你需要提前准备一些样式；
方法有很多的，我这里用计算属性
代码示例
<div v-for="Mes in Messages">
<p :class="MessClass(Mes)">{{Mes}}</p>
</div>
data()
{
return{
Messages:["警告：你女朋友正在与其他异性聊天！","成功：一百块法定货币到账。","信息：你女朋友正在与其他异性聊天，你不慌吗？","危险：您的账户在异地登录。"]
}
},
计算属性
computed:{
MessClass()
{
return(Arg)=>{
switch(Arg.slice(0,3))
{
case "警告：":
return "Warning"
case "成功：":
return "Success"
case "信息：":
return "Info"
case "危险：":
return "Danger"
default:
return "Info"
}
}
}
},
css 样式
.Warning{
background-color:#E6A23C
}
.Success{
background-color:#67C23A
}
.Info{
background-color: #909399
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）