In what situations would one choose v-text over the "mustache" syntax?

Question

According to the VueJS docs, <span v-text="msg"></span> is the same as <span>{{msg}}</span>. Out of really nothing other than habit I always use the "mustache" syntax to bind data. In what situations would one choose to use v-text instead, and why?

Answer 1

One reason you might want to use v-text is if you need to pre-render some markup on the server, but also have it bind client-side. For example:

<span v-text="msg">This message was pre-rendered from the server.</span>

That way the {{msg}} syntax doesn't get in the way of the content.

Answer 2

This directive updates a html-node with innerContent. Html will not be rendered like with v-html. You can use v-text to have your template look other but internally, {{ Mustache }} interpolations are also compiled as a v-text direcitve.