我的目标是加载包裹在不同大小的（工作）标题标签中的消息<h1>message 1</h1><h2>message 2</h2><h3>message 3</h3>基于我在代码中生成的随机整数，并使用 mustaches {{ }} 将来自计算属性的消息加载到浏览器中。但是我尝试将不同的标题加载到浏览器中失败了。不是像我期望的那样以大字体加载标题标签，它只是坐在那里，就好像它是作为常规文本输入的一样。我没有收到有关它的错误消息。我试过去除<p></p>胡须周围的标签，以防破坏其中的<h1>标签。那没有用。我已经尝试添加单独的胡须来仅加载我想要变成标题的消息周围的标题标签。那没有用。所以这是我的代码...<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>App</title></head><body> <div id="root"> <input type="text" id="input" v-model="someNumber"></input> <p> the value is: {{ someNumber }}</p> <button @click="randomNum">random a new number</button> <p>Result: {{ sleepyTime }} </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>我想要的结果是：例如，“回去睡觉就好了。" 加载，就像它在此处以大字体在页面上所做的那样。相反，我得到的文本加载如下：<h1>It's okay to go back to bed.</h1>h1 标签在浏览器中显示为文本。该怎么办？ps 我正要去上班，所以我会在太平洋时间晚上 11:40 左右回来查看这个线程。
1 回答
皈依舞
TA贡献1851条经验 获得超3个赞
使用{{ ... }}我们的值输出被转义。没有办法禁用它。
要输出 HTML，您可以使用v-html. 然而，这是不等同于{{ ... }}作为v-html需要被吊离的元件，并且不能用于创建部分内容。
所以你可以这样写：
<p v-html="'Result: ' + sleepyTime"></p>
另一个选项，通常也是首选选项，是将标记保留在模板中。那看起来像这样：
<p>Result:
<h1 v-if="someNumber < 5">It's okay to go back to bed.</h1>
<h3 v-else-if="someNumber < 7">One more hours plus a cup of coffee</h3>
<h2 v-else-if="someNumber < 9">2 more hours and 2 cups of coffee.</h2>
<h1 v-else>Drill 3 cups of coffee. And just stay up.</h1>
</p>
你也可以这样做：
<p>Result:
<component :is="headingSize">{{ content }}</component>
</p>
这里headingSize和content将是分别设置标签名称和内容的计算属性。您可以使用返回对象的单个属性来实现它们，例如：
computed: {
heading () {
if (this.someNumber < 5) {
return { tag: 'h1', content: "It's okay to go back to bed." }
}
// etc.
}
}
和：
<p>Result:
<component :is="heading.tag">{{ heading.content }}</component>
</p>
添加回答
举报
0/150
提交
取消