Vue的v-html样式无效问题
## 例如我在vue中添加了如下的v-html:样式无效代码:<table class="table"v-html="table_data"width="100%">{{table_data}}</table><script>export default {data(){return{...
·
## 例如我在vue中添加了如下的v-html:
样式无效代码:
<table class="table" v-html="table_data" width="100%">
{{table_data}}
</table>
<script>
export default {
data(){
return{
table_data:" <div class=\"tb_nodata\">测试 </div>"
}
}
}
</script>
<style scoped>
.tb_nodata{
font-size: 20px;
color: #0c08fc;
}
</style>
正确代码:
<table class="table" v-html="table_data" width="100%">
{{table_data}}
</table>
<script>
export default {
data(){
return{
table_data:" <div class=\"tb_nodata\">测试 </div>"
}
}
}
</script>
<style scoped>
.table >>>.tb_nodata{
font-size: 20px;
color: #0c08fc;
}
</style>
格式为: .table >>>.tb_nodata{ 。。。},就可以生效了
其他外部组件引入,都要使用 “>>> “’这种语法。
更多推荐
已为社区贡献8条内容
所有评论(0)