Vue.js中的备用绑定语法

Question

题

我想知道是否有一种替代语法来输出Vue.js中的数据 ，而不是花括号， 比如ng-bind Angular指令 。

阅读文档，似乎Vue.js只接受带有v-bind指令的 标签属性 ，但我希望它也能用于内部html。

上下文

我想使用PHP输出数据，一旦加载页面，就用Vue管理它。 想象一下下一个情况：

我们想要这个输出：

<div>Hello</div>

首先，我们用php输出数据

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

之后，我们希望能够使用Vue更改内容。 目前的语法是;

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

我们不能混合使用这两种语法，所以我需要这样的东西：

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

谢谢您的帮助。

Answer 1

您可以使用v-text指令：

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

或者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) ?>"
        };
    }
});

然后在HTML中：

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

基本上你需要使用PHP来填充你的javascript变量，无论你是通过AJAX还是只打印出上面的变量都取决于你。 您可能需要将其编码为JSON或至少确保引用被转义。 在前端，让Vuejs管理视图而不是使用PHP直接打印到视图中。