Vue.js中Mustache渲染HTML标题标签失效，求解决方案

嘿，这个问题我熟！你遇到的核心问题是：Vue的Mustache语法（{{}}）会自动转义HTML内容——也就是说，你通过计算属性返回的<h1>、<h3>这些标签会被当成普通字符串输出，而不是被浏览器解析成真正的标题元素。所以不管你怎么调整外层的<p>标签或者拆分语法，都没法让标题标签生效。

快速解决方案：使用v-html指令 #

Vue专门提供了v-html指令来处理包含HTML的内容，它会把绑定的值当作HTML解析并渲染，而不是转义成文本。你只需要把原来的Mustache语法替换成v-html即可：

把这行代码：

<p>Result: {{ sleepyTime }} </p>

改成：

<p>Result: <span v-html="sleepyTime"></span></p>

如果你不需要外层的“Result:”文本，也可以直接用一个容器单独渲染：

<div v-html="sleepyTime"></div>

修改后的完整代码示例 #

这里是调整好的完整代码，你可以直接复用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>App</title>
</head>
<body>
    <div id="root">
        <input type="text" id="input" v-model="someNumber">
        <p> the value is: {{ someNumber }}</p>
        <button @click="randomNum">random a new number</button>
        <p>Result: <span v-html="sleepyTime"></span> </p>
    </div>
    <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#root",
            data: {
                goToBed: false,
                someNumber: 0
            },
            methods: {
                randomNum() {
                    this.someNumber = Math.random() * 10
                }
            },
            computed: {
                sleepyTime: function () {
                    if (this.someNumber < 5) {
                        return "<h1>It's okay to go back to bed.</h1>"
                    } else if (5 < this.someNumber && this.someNumber < 7) {
                        return "<h3>One more hours plus a cup of coffee</h3>"
                    } else if (7 < this.someNumber && this.someNumber < 9) {
                        return "<h2>2 more hours and 2 cups of coffee.</h2>"
                    } else if (this.someNumber > 9) {
                        return "<h1>Drill 3 cups of coffee. And just stay up.</h1>"
                    }
                }
            }
        });
    </script>
</body>
</html>

补充小提醒 #

• v-html只能绑定到单个元素上，不能直接用在根容器上同时渲染多个HTML片段；
• 如果你的内容来自用户输入，一定要注意XSS风险（做好内容过滤），不过你的场景是自己生成的固定内容，完全不用担心这个问题。

等你太平洋时间23:40回来就能看到效果啦，祝你上班顺利！

内容的提问来源于stack exchange，提问作者Roly Poly