我的目标是加载包裹在不同大小的（工作）标题标签中的消息
<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 左右回来查看这个线程。
皈依舞
相关分类