vue template html属性,VueJS模板template完全使用教程

接上一节： Vue实例和组件component使用和原理详解，从上一节的学习中，我们知道如何将一些内容以文本的形式在屏幕上输出，在本节中，我们将学习如何将内容以HTML模板的形式输出到屏幕上。

1、VueJS显示html模板内容，下面是使用到的html内容：

VueJS模板使用

{{title}}

{{author}}

{{htmlcontent}}

template.js内容如下：

var app = new Vue({

el: "#app",

data: {

title: "如何使用VueJS的模板？",

author: "Once",

htmlcontent: "

VueJS模板语法

"

}

});

现在我们的目的是将htmlcontent中的html内容显示在页面上，但我们使用插件表达式{{}}时，这显然不是预期显示结果，下面是显示结果：

上面的结果显示，htmlcontent中的内容不是格式化输出的，Vue直接显示它的值了，这不是我们想要的，我们需要将它在浏览器显示为适当的HTML内容。

对这个问题，我们可以使用v-html指令，在指定的元素使用v-html指令，VueJS就知道如何输出这些HTML内容了，下面是加了v-html指令的代码：

{{title}}

{{author}}

使用v-html指令不需要使用{{}}插值表达式，使用v-html=”htmlcontent”即可，htmlcontent在template.js中的Vue实例中有定义，下面是使用v-html后的效果：

2、VueJS给HTML元素属性赋值。现在我们看到了如何将HTML模板添加到DOM，就是使用v-html指令进行指定，现在我们继续看如何添加属性到已知的HTML元素上。作为例子，这里是给一个图片标签img上添加src属性，实现这个功能也是Vue的一部分，例子如下：

{{title}}

{{author}}

在上面的代码中，img的src是空的，我们需要从template.js中给它的src赋值，下面我们在data中声明一个属性imgsrc，并给它赋值，如下：

var app = new Vue({

el: "#app",

data: {

title: "如何使用VueJS的模板？",

author: "Once",

htmlcontent: "

VueJS模板语法

",

imgsrc: "img/reading.jpg"

}

});

如果我们使用插值表达式{{}}将imgsrc赋值给img的src，如下，输出图片将不显示，如下面：

此时我们看到的是损坏的图片，可以知道使用插值表达式无效。记住，给任何html元素分配或赋值，我们需要使用v-bind指令，下面我们可以使用v-bind指令给img图片的src赋值，使用方式为：v-bind:{html元素属性名}=”vue实例data的属性名”，使用代码如下：

{{title}}

{{author}}

因为这里是给img标签的src属性赋值，所以使用的是v-bind:src，其它的属性使用类似，要注意，这里指定的属性值名是和vue实例中的data的属性名是相同的，下面是显示效果：

右键检查页面，查看使用v-bind的src，如下：

以上是VueJS模板template的完全使用详解，学习了v-html指令和v-bind指令的使用。