我们在前面的章节中已经了解了如何在屏幕上以文本内容的形式获得输出.在本章中,我们将学习如何在屏幕上以HTML模板的形式获得输出.
为了理解这一点,让我们考虑一个示例并在浏览器中查看输出.
VueJs Instance Firstname : {{firstname}}
Lastname : {{lastname}}
{{htmlcontent}}
vue_template.js
var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "" }})Vue Js Template
现在,假设我们想要在页面上显示html内容.如果我们碰巧使用插值,即使用双花括号,这就是我们将在浏览器中获得的内容.
如果我们看到html内容的显示方式与我们在变量htmlcontent中给出的方式相同,那么这不是我们想要的,我们希望它以适当的HTML显示浏览器上的内容.
为此,我们必须使用 v-html 指令.我们将v-html指令分配给html元素的那一刻,VueJS知道它必须将其作为HTML内容输出.让我们在 .html 文件中添加v-html指令并查看差异.
VueJs Instance Firstname : {{firstname}}
Lastname : {{lastname}}
现在,我们不需要使用双花括号来显示HTML内容,而是使用了v-html ="htmlcontent",其中定义了htmlcontent在 js 文件中如下 :
var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "" }})Vue Js Template
浏览器中的输出如下 :
如果我们检查浏览器,我们会看到内容已添加与 .js 文件中定义的变量 htmlcontent:"< div>< h1> Vue Js Template