在前面的章节中我们已经学到了如何在屏幕上以文本内容的形式获得输出。 在本章中将学习如何在屏幕上以HTML模板的形式获取输出。
要理解这一点，让我们先看看一个例子，并在浏览器中看到输出。创建一个文件：template.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs模板</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h2>名字 : {{name}}</h2>
<h2>城市 : {{city}}</h2>
<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: {
name : "Maxsu",
city : "海口",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})
现在，假设要在页面上显示html内容。 如果使用了插值，也就是使用双括号，在浏览器中得到的结果如下所示 -
如果看到html内容的显示方式与在htmlcontent中给出的方法相同，那么这不是我们想要的，我们希望它在浏览器中显示在正确的HTML内容中。
为此，可以通过使用v-html指令。 当将v-html指令分配给html元素时，VueJS知道它必须以HTML内容的形式输出。现在通过template.html文件中添加v-html指令并查看之上面显示的结果有什么不同。
<html>
<head>
<meta charset="utf-8" />
<title>VueJs模板</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h2>名字 : {{name}}</h2>
<h2>城市 : {{city}}</h2>
<div v-html = "htmlcontent"></div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>
现在，不需要使用双括号来显示HTML内容，而是使用了v-html ="html content"，其中html内容在vue_template.js文件中定义如下 -
var vm = new Vue({
el: '#vue_det',
data: {
name : "Maxsu",
city : "海口",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})
再次使用浏览器打开template.html，输出效果如下所示 -
如果查看浏览器，我们会看到内容的添加方式与在.js文件中定义的变量htmlcontent相同："<div><h1>Vue Js Template</h1></div>"。
下面来看看浏览器中的inspect元素，如下图所示 -
我们已经看到如何将HTML模板添加到DOM。 现在来看看如何为现有的HTML元素添加属性。
考虑一下，在HTML文件中有一个图像标签，并为src属性分配一个值，它是Vue的一部分。
示例一
参考以下代码(template-example1.html) -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs模板</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h2>名字 : {{name}}</h2>
<h2>城市 : {{city}}</h2>
<div v-html = "htmlcontent"></div>
<img src = "" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/template-image.js"></script>
</body>
</html>
看看上面的img标签，src属性的值是空的。所以我们需要从vuejs中添加src属性的值。 如何可以做到这一点？在template-example1.js文件中的数据对象中存储imgsrc，如下所示 —
var vm = new Vue({
el: '#vue_det',
data: {
name : "Maxsu",
city : "海口",
htmlcontent : "<div><h2>Vue Js Template</h2></div>",
imgsrc : "images/mydog.jpg"
}
})
如果按如下所示分配src属性的值，浏览器中的输出将如下图所示 -
<img src = "{{imgsrc}}" width = "300" height = "250" />
但是这样做并不能显示图像。要将任何属性分配给HTML标签，需要使用v-bind指令。 用v-bind指令将src添加到img标签中。这是在template-example1.html文件中分配的。参考以下代码 -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs模板</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h2>名字 : {{name}}</h2>
<h2>城市 : {{city}}</h2>
<div v-html = "htmlcontent"></div>
<img v-bind:src = "imgsrc" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/template-image.js"></script>
</body>
</html>
需要在src属性前添加v-bind:src = "imgsrc"和src的变量名称。以下是浏览器中的输出结果 -
