Javascript 如何检查DOM中的特定元素并创建新的Vue实例？

我试图找出一种方法来检查DOM中类名为“amp”的特定元素。如果匹配，那么我希望创建一个新的Vue实例，并使用HTML中的数据属性作为数据（）。我猜需要某种循环

这可能吗？正确的方法是什么

多谢各位

HTML示例：

<div class="amp" id="vue" data-contentDeliveryUrl="www.urlexample.com" data-encodedQuery="=query234" data-cidItem="555-555-555"></div>

<div class="amp" id="vue" data-contentDeliveryUrl="www.urlexample.com" data-encodedQuery="=query123" data-cidItem="666-666-666"></div>

您可以使用返回包含

amp

类的元素的节点列表。然后，迭代该列表以创建Vue实例

要设置Vue数据属性，您需要同时使用。HTML中的数据属性需要用连字符分隔，而不是使用大小写

（函数（）{
document.queryselectoral（'.amp'）.forEach（el=>{
新Vue({
埃尔，
数据（）{
返回{
…el.dataset，
}
},
安装的（）{
console.log（此.$data）
//此文件为.contentDeliveryUrl
//这个.encodedQuery
//这个项目
},
})
})
})（）

，但这不被接受。不管是哪种方式，它都会起作用，我只是不确定这是否是你想要的

new Vue({
 el: '#vue',
 data() {
    return {
        contentDeliveryUrl: contentDeliveryUrl,
        encodedQuery: encodedQuery,
        cidItem: cidItem
    }
 },
 render: h => h(Page)
})