Please enable JavaScript.
Coggle requires JavaScript to display documents.
02. DISPLAYING, LOOPING, SEARCHING AND FILTERING DATA (Displaying lists…
02. DISPLAYING, LOOPING, SEARCHING AND FILTERING DATA
Displaying lists and more complex data with Vue using v-if, v-else, and v-for
v-html
The v-html directive allows you to output content without using the mustachestyle 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
You should try and avoid adding HTML to your Vue instance, as it starts to mix up the View in the ViewModel and Model of our MVVM structure. There is also the danger you output an invalid HTML tag inside another. You should only use v-html with data you trust, because using it with an external API could be a security concern as it would allow the API to have control over your application. A potentially malicious API could use v-html to inject undesired content and HTML. Only use v-html with data you can fully trust
v-bind
The v-bind: attribute can be shortened to just :, so, for example, v-bind:src would become :src
v-if/v-else-if/v-else
The danger here is that your logic starts to creep into your View away from your ViewModel. To combat this, the attribute also takes functions as a value. The method can be as complicated as required but ultimately must return a true if you wish to show the code and a false if not. Bear in mind that if the function returns anything other than a false value (such as 0 or false) then the result will be interpreted as true
If you don't wish to completely remove the element and only hide it, there is a more appropriate directive, v-show. This applies a CSS display property rather than manipulating the DOM
The element with v-else needs to directly follow the one containing v-if; otherwise, your application will throw an error
-
v-for
The v-for loop needs to be applied to the HTML element you want to be repeated, in this case, <li>. If you don't have a wrapping element or don't wish to use the HTML you can use the Vue <template> elements. These get removed at runtime while still creating a container for you to output the data with
The template tag also hides the contents until the app has initialized, which may be handy if your network is slow or your JavaScript takes a while to fire
-
-
-