Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Displaying, Looping, Searching, and Filtering Data Chapter 2

Before we get into building our simple app and displaying our users, we'll cover some

more of the features of Vue and the HTML-specific attributes available in your view. These
range from dynamically rendering content to looping through arrays.

HTML declarations

Vue allows you to use HTML tags and attributes to control and alter the view of your
application. This involves setting attributes dynamically, such as alt and href. It also

allows you to render tags and components based on data in the application. These
attributes begin with a v- and, as mentioned at the beginning of this book, get removed

from the HTML on render. Before we start outputting and filtering our data, we'll run
through a few of the common declarations.

v-html

The v-html directive allows you to output content without using the mustache-style curly

bracket syntax. It can also be used if your output contains HTML tags – it will render the

output as HTML instead of plain text. The value of the HTML attribute is that of the data
key or computed function name:

View:

In your view app space, add the v-html attribute to an element:

<div id="app">

<div v-html="message"></div>

</div>

JavaScript:

In the JavaScript, set the message variable to a string which contains some HTML elements:

const app = new Vue({

el: '#app',

data: {

message: '<h1>Hello!</h1>'

}

});