v-html渲染<p>标签时渲染的结构与传入的结构不一致
<script>
export default {
data() {
return {
html: `<p>` +
`<a target="_blank">` +
`<div>` +
`aaaaaaa` +
`</div>` +
`</a>` +
`</p>`
}
}
}
</script>
<template>
<div v-html="html"></div>
</template>
传入的字符串结构是:
-p
-a
-div
-text
但是渲染出来的结构却是混乱的,经测试去掉<p>标签后就正常了。
使用的是vue2,由于在做的是编辑器,所以不可避免地有<p>标签的情况,想问下这是什么原因导致的渲染异常
这个和 vue2 无关,你可以单纯写一个 html 文件试试;
段落是块级元素,如果在关闭的 </p> 标签之前解析了另一个块级元素,则该标签将自动关闭。
标准是这样 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p
在 Vue2 中使用 v-html
指令时遇到 <p>
标签内嵌套 <a>
标签和 <div>
标签导致渲染结构异常的问题,主要是因为 HTML 的结构规范和浏览器的解析方式。
<p>
元素(段落元素)是所谓的“流式内容”的容器,它只能包含内联元素(如 <span>
、<a>
等)和其他的块级元素(如 <div>
理论上不是直接允许的,尽管某些浏览器可能允许,但这不是标准行为)。然而,<a>
元素(锚点元素)虽然通常是内联元素,但在某些情况下(如包含块级元素时)会表现得像块级元素。<p>
标签内包含 <a>
标签,而 <a>
标签内又包含 <div>
标签时,它可能会尝试修复这种非标准结构。由于 <div>
是块级元素,而 <p>
期望内联或块级但非 <div>
的内容,浏览器可能会重新排列或忽略某些标签,以符合 HTML 的“预期”结构。v-html
:Vue 的 v-html
指令只是简单地将字符串作为 HTML 插入到元素中,并不改变或验证 HTML 的结构。因此,任何 HTML 结构的错误或不符合规范的地方都会在渲染时由浏览器处理。<p>
标签内使用 <div>
:如果可能,重新设计你的 HTML 结构,避免在 <p>
标签内使用 <div>
。例如,你可以将 <div>
替换为 <span>
或其他内联元素,或者将 <p>
替换为 <div>
(如果适合你的布局)。v-html
插入复杂的 HTML 字符串。这样可以更好地控制渲染过程和结构。通过上述方法,你可以避免在 Vue 应用中遇到由于 HTML 结构不规范而导致的渲染问题。
我在vue2中用v-if条件渲染不同的div元素。当v-if中的只有一个判断条件时渲染是正常的,但是有两个&&条件时就条件渲染不成功了(总是执行渲染v-else下的div元素)。这是为什么呢? 贴下代码: item是dataList的数组项,里面的数据都是正确的。
看解答都是说“node_modules中的element-ui文件右键,「将目录标记为」-「不排除」“但感觉这不是长久的解决办法,一个项目安装完依赖之后,每次都需要手动不排除吗?这里的不排除是什么意思?有没有办法让用到的标签自动关联上呢?
问题内容: 我的数据库存储产品信息,其中许多信息被组织成列表。我将数据加载到Angular中。 例如, 当我尝试将此数据加载到我的Angular应用程序中时,它会以文本形式呈现(即未解析)。我了解这可能是出于安全原因而发生的,但是有什么解决方法吗? 问题答案: 正如Damax在这里所说的那样:
在Vue2环境中,有一个动态表单,数据源如下: 要实现的功能是:每个表单项根据其对象里的show来判断是否显示,如果show为空数组,代表无条件限制。 比如是否合格这一项,只有在 年龄<=28&&身高>=180 时才显示。 测试渲染代码如下: 请问下一步该如何进行?
问题内容: 显然,如果元素中没有结束标签而没有匹配的开始标签,则大多数(如果不是全部)浏览器将在其位置生成一个空段: 即使end标记周围存在任何文本,也不会将其作为此元素的一部分-它将始终为空,并且文本节点将始终独立存在: 如果以上内容都包裹在和标记中,…我将让您猜测会发生什么: 有趣的是,如果标记之前没有或标记,则除IE9和更早版本之外的所有浏览器都 不会 生成空段落(另一方面,IE≤9始终会创
我得到了一个类似: 现在,当呈现v-for语句的内容时,div的高度保持不变。这会导致下一个元素重叠(或至少浮动)在其上。我通过设置“clear:both”来帮助自己,但这不是一个好的解决方案。