javascript - Vue.js:如何使动态创建的 HTML 使用作用域 CSS？

Question

简短版:

我在组件的方法中生成一个带有 HTML 的字符串，但我无法弄清楚如何使用作用域 CSS 设置该 HTML 的样式，因为它缺少用于作用域的数据属性。

稍微长一点的版本:

我有一个名为 highlight 的函数，它接受一个字符串并返回一个 HTML 字符串，其中突出显示所有出现的搜索词，意思是用 <span class="match"> 包围.但是，由于我是在一个字符串中手动执行此操作，因此该跨度没有获得我的 Vue 组件中的作用域 CSS 需要工作的特殊数据属性，因此我设置这些匹配样式的唯一方法是制作我的 CSS没有范围，我不想这样做。有没有更特定于 Vue 的方法让我做到这一点？该函数如下所示:

// Source: http://stackoverflow.com/a/280805/2874789
function highlight(data, search) {
    return data.replace(
      new RegExp("(" + preg_quote(search) + ")", 'gi'),
      "<span class=match>$1</span>"
    );
}

(preg_quote只是一个转义需要转义的东西的函数)

谢谢!

Answer 1

Dynamically Generated Content DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.

似乎没有特定于 VueJS 的方法。听起来最好的选择是在突出显示函数的输出中设置内联样式，或者使用全局类。

function highlight(data, search) {
  return data.replace(
    new RegExp("(" + preg_quote(search) + ")", 'gi'),
     "<span class=match>$1</span>"
    );
}


<style>
  .match {
    color: yellow;
  }
</style>

或

function highlight(data, search) {
  return data.replace(
    new RegExp("(" + preg_quote(search) + ")", 'gi'),
     "<span style="{ color: yellow }">$1</span>"
    );
}

你也可以试试deep selector，不过我自己也不是很熟悉。

https://vue-loader.vuejs.org/en/features/scoped-css.html