前面的章节中,我们学习了如何在屏幕上以文本内容的形式获取输出。在本章中,我们将学习如何在屏幕上以HTML模板的形式获取输出。
为了理解这一点,让我们考虑一个示例并在浏览器中查看输出。
<html>
<head>
<title>VueJs Instancetitle>
<script type = "text/javascript" src = "js/vue.js">script>
head>
<body>
<div id = "vue_det">
<h1>Firstname : {
{firstname}}h1>
<h1>Lastname : {
{lastname}}h1>
<div>{
{htmlcontent}}div>
div>
<script type = "text/javascript" src = "js/vue_template.js">script>
body>
html>
vue_template.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "
Vue Js Template
"
}
})
假设我们要在页面上显示html内容。如果碰巧将其用于插值,即带有双大括号,这就是我们将在浏览器中看到的内容。