Question

我试图创建一个mixin，我可以传递字符串，mixin做一些更改并返回修改过的字符串。

它适用于基本字符串，但只要我将HTML放在上面就会停止工作。

以下是我的问题的一个有效例子：https://jsfiddle.net/50wL7mdz/98267/

以下是HTML：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h1>{{ test("This works!") }}</h1>
  <p>{{ test("This<br />doesn't work!") }}</p>
</div>

和JS：

Vue.mixin({
    methods: {
    test: function (message) {
        return message
    }
  }
})

new Vue({
  el: '#app'
})

我错过了什么？

Answer 1

我认为你需要转义像“＆lt;”这样的特殊字符。

如果您不知道如何做到这一点，可以使用此在线工具：https://www.freeformatter.com/html-escape.html

This<br />doesn't work!

将转换为

This&lt;br /&gt;doesn't work!

Answer 2

编辑：双胡须将数据解释为纯文本，而不是HTML。因此，使用 v-html 指令。示例在这里https://jsfiddle.net/jfopfpwo/

<div id="app">
  <h1>{{ test("This works!") }}</h1>
  <p v-html="test(`This <br />doesn't work!`)"></p>
</div>

Vue.mixin({
methods: {
test: function (message) {
    return `${message} (:`
   }
 }
})
new Vue({
   el: '#app',
   data: {
     message: 'Hello Vue.js!'
   }
})

顺便说一句，你做了某种过滤器，已经在Vue中了。 https://vuejs.org/v2/guide/filters.html

在VueJS中传递包含HTML作为参数的字符串不起作用？

2 个答案: