问题

Question

问题

我想知道是否有一个替代语法来输出Vue.js 中的数据，而不是大括号like the ng-bind Angular directive。

阅读文档时，似乎Vue.js accepts only tag properties带有 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指令：

.exception li {
background: rgb(144, 144, 144);
color:white;
}

.exception ul {
background: rgb(144, 144, 144);
color:white;
}

或v-html：

<div v-text="hello_string"></div>
<!-- same as -->
<div>{{ hello_string }}</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直接打印到视图中。

Vue.js中的备用绑定语法

问题

上下文

2 个答案: