相同的 html 代码，采用 v-html 和直接书写存在差异如何解决？
在 vue.js 应用中，使用 时，有时会遇到与直接在模板中书写的 html 代码呈现不同效果的情况，这让人疑惑不已。
为了解决这个问题，demo 中提供了以下示例：
<template>
<svg viewbox="0 0 20 20">
<path .../>
<path .../>
</svg>
</template>
<template>
<svg v-html="'viewbox="0 0 20 20" ...'" >
<!-- ... -->
</svg>
</template>差异原因
立即学习“前端免费学习笔记（深入）”；
出现这种差异的原因在于 svg 中 viewbox 属性的书写规范。
解决方案
要解决此差异，可以使用以下方法：
<template>
<svg viewbox="0 0 20 20">
<!-- ... -->
</svg>
</template><template>
<svg v-html="'viewbox="0 0 20 20" ...'" >
<!-- ... -->
</svg>
</template>以上就是Vue.js中v-html渲染SVG时，viewBox属性差异如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
203
