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直接打印到視圖中。