VueJS – 模板（5）
我们在前面的章节中学习了如何在屏幕上以文本内容的形式获得输出。在本章中，我们将学习如何在屏幕上以 HTML 模板的形式获取输出。
要理解这一点，让我们考虑一个示例并查看浏览器中的输出。
<html>
<head>
<title>VueJs Instance</title>
<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 : "<div><h1>Vue Js Template</h1></div>"
}
})现在，假设我们要在页面上显示 html 内容。如果我们碰巧将它与插值一起使用，即使用双大括号，这就是我们将在浏览器中得到的。
如果我们看到 html 内容的显示方式与我们在变量 htmlcontent 中给出的方式相同，这不是我们想要的，我们希望它以正确的 HTML 内容显示在浏览器上。
为此，我们将不得不使用v-html指令。当我们将 v-html 指令分配给 html 元素时，VueJS 就知道它必须将其输出为 HTML 内容。让我们在.html文件中添加 v-html 指令并查看不同之处。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>现在，我们不需要双大括号来显示 HTML 内容，而是使用 v-html = ”htmlcontent” 其中 htmlcontent 在js文件中定义如下 –
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})浏览器中的输出如下 –
如果我们检查浏览器，我们会看到内容以在.js文件中定义的相同方式添加到变量htmlcontent 中：“<div><h1>Vue Js Template</h1></div>” .
我们来看看浏览器中的inspect元素。
我们已经看到了如何将 HTML 模板添加到 DOM。现在，我们将看到如何为现有的 HTML 元素添加属性。
考虑一下，我们在 HTML 文件中有一个图像标签，我们想要分配 src，它是 Vue 的一部分。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img src = "" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/vue_template1.js"></script>
</body>
</html>看上面的img标签，src是空白的。我们需要从 vue js 向其中添加 src。让我们来看看如何做到这一点。我们将 img src 存储在.js文件的数据对象中，如下所示 –
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>",
imgsrc : "images/img.jpg"
}
})如果我们按如下方式分配 src，浏览器中的输出将如以下屏幕截图所示。
<img src = "{{imgsrc}}" width = "300" height = "250" />
我们得到一个破碎的图像。要将任何属性分配给 HMTL 标签，我们需要使用v-bind指令。让我们使用 v-bind 指令将 src 添加到图像中。
这就是它在.html文件中的分配方式。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img v-bind:src = "imgsrc" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/vue_template1.js"></script>
</body>
</html>我们需要在 src 前面加上v-bind:src = ”imgsrc”和 src 在变量名前加上前缀。
以下是浏览器中的输出。
让我们用 v-bind 检查并检查 src 的样子。
如上面的截图所示，src 被分配给它没有任何 vuejs 属性。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
