面试题：Vue 2.0 的 v-html 指令不再支持使用过滤器，还有哪些处理 HTML 内容的方法？

在 Vue 2.0 中，v-html 指令用于将数据作为 HTML 插入到 DOM 中，但它不再支持使用过滤器（Filters）。如果需要处理 HTML 内容，可以通过以下方法实现：

1. 使用计算属性（Computed Properties）

计算属性可以根据数据动态生成处理后的 HTML 内容。

示例


<template>
  <div v-html="processedHtml"></div>
</template>
<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  computed: {
    processedHtml() {
      // 在这里处理 HTML 内容
      return this.rawHtml.replace(/red/g, 'blue');
    },
  },
};
</script>
<template>
  <div v-html="processedHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  computed: {
    processedHtml() {
      // 在这里处理 HTML 内容
      return this.rawHtml.replace(/red/g, 'blue');
    },
  },
};
</script>
<template>
  <div v-html="processedHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  computed: {
    processedHtml() {
      // 在这里处理 HTML 内容
      return this.rawHtml.replace(/red/g, 'blue');
    },
  },
};
</script>

优点

响应式：当数据变化时，计算属性会自动更新。
可复用：可以在多个地方使用同一个计算属性。

缺点

性能开销：如果处理逻辑复杂，可能会影响性能。

2. 使用方法（Methods）

通过方法动态生成处理后的 HTML 内容。

示例


<template>
  <div v-html="processHtml(rawHtml)"></div>
</template>
<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  methods: {
    processHtml(html) {
      // 在这里处理 HTML 内容
      return html.replace(/red/g, 'blue');
    },
  },
};
</script>
<template>
  <div v-html="processHtml(rawHtml)"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  methods: {
    processHtml(html) {
      // 在这里处理 HTML 内容
      return html.replace(/red/g, 'blue');
    },
  },
};
</script>
<template>
  <div v-html="processHtml(rawHtml)"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  methods: {
    processHtml(html) {
      // 在这里处理 HTML 内容
      return html.replace(/red/g, 'blue');
    },
  },
};
</script>

优点

灵活性高：可以根据需要传递参数。
逻辑分离：将处理逻辑封装在方法中。

缺点

手动调用：需要手动调用方法，无法自动响应数据变化。

3. 使用全局方法或工具函数

将 HTML 处理逻辑封装在全局方法或工具函数中，方便复用。

示例


// utils.js
export function processHtml(html) {
  return html.replace(/red/g, 'blue');
}
// 组件中
<template>
  <div v-html="processedHtml"></div>
</template>
<script>
import { processHtml } from './utils';
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  computed: {
    processedHtml() {
      return processHtml(this.rawHtml);
    },
  },
};
</script>
// utils.js
export function processHtml(html) {
  return html.replace(/red/g, 'blue');
}

// 组件中
<template>
  <div v-html="processedHtml"></div>
</template>

<script>
import { processHtml } from './utils';

export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  computed: {
    processedHtml() {
      return processHtml(this.rawHtml);
    },
  },
};
</script>
// utils.js
export function processHtml(html) {
  return html.replace(/red/g, 'blue');
}

// 组件中
<template>
  <div v-html="processedHtml"></div>
</template>

<script>
import { processHtml } from './utils';

export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
  computed: {
    processedHtml() {
      return processHtml(this.rawHtml);
    },
  },
};
</script>

优点

复用性强：可以在多个组件中使用。
逻辑分离：将处理逻辑与组件解耦。

缺点

需要引入：需要手动引入工具函数。

4. 使用自定义指令（Directives）

通过自定义指令处理 HTML 内容。

示例


// 定义自定义指令
Vue.directive('process-html', {
  bind(el, binding) {
    el.innerHTML = binding.value.replace(/red/g, 'blue');
  },
  update(el, binding) {
    el.innerHTML = binding.value.replace(/red/g, 'blue');
  },
});
// 组件中
<template>
  <div v-process-html="rawHtml"></div>
</template>
<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
};
</script>
// 定义自定义指令
Vue.directive('process-html', {
  bind(el, binding) {
    el.innerHTML = binding.value.replace(/red/g, 'blue');
  },
  update(el, binding) {
    el.innerHTML = binding.value.replace(/red/g, 'blue');
  },
});

// 组件中
<template>
  <div v-process-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
};
</script>
// 定义自定义指令
Vue.directive('process-html', {
  bind(el, binding) {
    el.innerHTML = binding.value.replace(/red/g, 'blue');
  },
  update(el, binding) {
    el.innerHTML = binding.value.replace(/red/g, 'blue');
  },
});

// 组件中
<template>
  <div v-process-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<p style="color: red;">Hello, Vue!</p>',
    };
  },
};
</script>

优点

封装性强：将处理逻辑封装在指令中。
复用性强：可以在多个组件中使用。

缺点

复杂度高：需要熟悉自定义指令的用法。

5. 使用第三方库

如果需要复杂的 HTML 处理（如 Markdown 解析、XSS 过滤等），可以使用第三方库。

示例


// 使用 marked 解析 Markdown
import marked from 'marked';
export default {
  data() {
    return {
      markdown: '# Hello, Vue!',
    };
  },
  computed: {
    processedHtml() {
      return marked(this.markdown);
    },
  },
};
// 使用 marked 解析 Markdown
import marked from 'marked';

export default {
  data() {
    return {
      markdown: '# Hello, Vue!',
    };
  },
  computed: {
    processedHtml() {
      return marked(this.markdown);
    },
  },
};
// 使用 marked 解析 Markdown
import marked from 'marked';

export default {
  data() {
    return {
      markdown: '# Hello, Vue!',
    };
  },
  computed: {
    processedHtml() {
      return marked(this.markdown);
    },
  },
};

优点

功能强大：可以处理复杂的 HTML 内容。
节省时间：避免重复造轮子。

缺点

依赖第三方库：需要引入额外的库。

6. 总结

方法	适用场景	优点	缺点
计算属性	动态生成 HTML 内容	响应式、可复用	性能开销
方法	需要传递参数的场景	灵活性高	手动调用
全局方法/工具函数	多个组件复用逻辑	复用性强	需要引入
自定义指令	封装 HTML 处理逻辑	封装性强	复杂度高
第三方库	复杂 HTML 处理（如 Markdown 解析）	功能强大	依赖第三方库