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:

<!--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>

Answer 2

Vue.component({
    el:'#app',
    data:function(){
        return {
            hello_string:"<?php echo json_encode($hello_string) ?>"
        };
    }
});

Then in HTML:

<div id="app><div>{{ hello_string }}</div></div>

Basically you need to use PHP to fill your javascript variables, whether you do it through AJAX or just printing out the variables like above is up to you. You probably need to encode it to JSON or at least make sure quotes are escaped. On the front end, let Vuejs manage the view rather than printing directly into it with PHP.