Alternative binding syntax in Vue.js

Question

Question

I want to know if there is an alternative syntax to output data in Vue.js, instead of the curly braces, like the ng-bind Angular directive.

Reading the docs, it seems that Vue.js accepts only tag properties with the v-bind directive, but I want it to work with the inner html too.

Context

I want to output data using PHP and, once the page is loaded, manage it with Vue. Imagine the next situation:

We want this output:

 <div>Hello</div> 

First, we output the data with php

 <div><?php echo $hello_string ?></div> 

After that, we want to be able to change the content with Vue. The current syntax is;

 <div>{{ hello_string }}</div> 

We can't mix the two syntaxes, so I need something like this:

&lt!--Ideal syntax for mixing vue and php--> <div v-bind:innerhtml="hello_string"><?php echo $hello_string ?></div> 

Thank you for your help.

Answer 1

You could use the v-text directive:

<div v-text="hello_string"></div> <!-- same as --> <div>{{ hello_string }}</div> 

or the v-html:

<div v-html="html"></div> <!-- same as --> <div>{{{ html }}}</div>