web-dev-qa-db-ja.com

Vue.jsの代替バインディング構文

質問

中括弧の代わりにVue.jsにデータを出力するための代替構文があるかどうかを知りたい ng-bind Angularディレクティブ 。

ドキュメントを読むと、 Vue.jsはタグプロパティのみを受け入れますv-bindディレクティブのようですが、内部のhtmlでも機能するようにします。

環境

PHPを使用してデータを出力し、ページが読み込まれたら、Vueで管理します。次の状況を想像してみてください。

この出力が必要です。

 <div>こんにちは</ div> 

まず、phpでデータを出力します

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

その後、Vueでコンテンツを変更できるようにしたいと思います。現在の構文は次のとおりです。

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

2つの構文を混在させることはできないため、次のようなものが必要です。

<！-ミキシングの理想的な構文vue and php-> 
 <div v-bind：innerhtml = "hello_string"> <？php echo $ hello_string？> </ div> 

ご協力ありがとうございました。

javascriptphpangularjsvue.js
19
rogervila

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>
30
Pantelis Peslis
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にエンコードするか、少なくとも引用符がエスケープされていることを確認する必要があります。フロントエンドでは、PHPを使用してビューに直接印刷するのではなく、Vuejsにビューを管理させます。

0
Jeff