javascript - vue生成的dom有些奇怪,写的时候是嵌套,生成的时候是同级
本文介绍了javascript - vue生成的dom有些奇怪,写的时候是嵌套,生成的时候是同级的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<body>
<div id="app">
<p class="con1" @click="click">
vue
<p class="con2"></p>
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
mounted() {
for (let i of this.$el.children) {
console.log(i)
}
},
methods: {
click() {
for (let i = 0; i < this.$el.children.length; i++) {
console.log(this.$el.children[i])
}
}
}
})
</script>
</body>
明明是嵌套,但生成后是同级
解决方案
这个跟 vue
没关系,是因为浏览器渲染的时候不允许 <p>
标签包含 <p>
标签,所以你自己看下,实际渲染生成了三个 <p>
标签。
抛开 vue
单独写一个
<p>1
<p>2</p>
3</p>
你也会发现被浏览器渲染成了
<p>1</p>
<p>2</p>
"3"
<p></p>
这篇关于javascript - vue生成的dom有些奇怪,写的时候是嵌套,生成的时候是同级的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文