我在其中应用了一个组件
<div id="bgimg">
<div class="bgimg-container">
<div id="hero">
<div class="bgimg-container">
My content here
</div>
</div>
</div>
</div>
在原始HTML的dataProperties中，我有一个带有
的输入标签
#bgimg{
display: table;
background: url(../img/2.jpg);
width:100%;
height:100vh;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
#hero {
display: table;
width: 100%;
height: 100vh;
background: url(../img/1.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 7s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero, #bgimg {
background-attachment: fixed;
}
}
#hero .hero-logo {
margin: 20px;
}
#hero .hero-logo img {
max-width: 100%;
}
#hero .hero-container {
background: rgba(0, 0, 0, 0.8);
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
#bgimg .bgimg-container {
background: rgba(0, 0, 0, 0.8);
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
除了即使data [index] .property存在并且在我的组件数据中不为空，输入也保持为空。
<div v-html="dataProperties.replace(/name/g, index)">
答案 0 :(得分：0)
span的内容将替换为rawHtml属性的值，该值解释为纯HTML-数据绑定将被忽略。请注意，由于Vue并非基于字符串的模板引擎，因此无法使用v-html来组成模板部分。相反，组件是首选的UI重用和合成的基本单元
要处理用例，您应该以不同的方式进行操作，就像仅通过prop传递数据而不是原始html一样，并正常绑定输入