时间戳

首页 > 解决方案 > vue.js ：单击一个按钮，查看 dom，找到所有具有特定类名的类，并将一个新类附加到现有的类列表中

vue.js - vue.js ：单击一个按钮，查看 dom，找到所有具有特定类名的类，并将一个新类附加到现有的类列表中

问题描述

所以，我正在使用 Axios 来提取一个 html 文件，然后将该 html 文件中的所有内容通过<body>标签并将其附加到{{htmlData}}我模板中的 div 内部

看起来像这样：

<template>
     <somebutton> I click on</somebutton>
     <div id="some-container-name" v-html="htmlData">
        {{ htmlData }}
     </div>
</template>

     data: function() {
            return {
                htmlData:''
            };
        },
    methods: {
            pullView: function(html) {
                this.axios.get('http://someUrl.html').then(response => {
                    let corsHTML = response.data;
                    let htmlDoc = (new DOMParser()).parseFromString(corsHTML, "text/html");
                    this.htmlData = htmlDoc.documentElement.getElementsByTagName('body')[0].innerHTML;
                })
            },

用户可以选择单击按钮 - 然后代码搜索 dom，然后将类名附加到you-can-edit-me通过 axios 拉入的 html 文档中的每个现有类名。

这有意义吗？

由于我将这些内容拉入其中的方式，我真的没有机会使用 Vue 的 :bind 指令将任何内容绑定到此内容。我的 Google-fu 让我失望了，需要一些建议。是否可以编辑 this.htmlData 并在该对象中进行转换，然后我想重新渲染数据？

我不想用 jQuery 污染我的工作并且想知道是否有其他人做过这样的事情？

标签： vue.jsvuejs2

解决方案

因为你已经有一个 parsed htmlDoc：

for (const element of htmlDoc.querySelectorAll('.you-can-edit-me')) {
  element.classList.add('additional-css-class');
}

在您的pullView方法中，在将其分配给this.htmlData.

推荐阅读