vue タグ属性のデータバインディングとスプライシングを実装する方法-jsチュートリアル-php.cn

vue タグ属性のデータバインディングとスプライシングを実装する方法

php中世界最好的语言

リリース： 2018-05-29 09:59:25

オリジナル

2058 人が閲覧しました

今回は、vue タグ属性データバインディングとスプライシングを実装する方法を説明します。vue タグ属性のデータバインディングとスプライシングを実装するための注意事項は何ですか。以下は実際のケースです。

vue公式サイトのドキュメントをスキャンした後、Webサイトのプロジェクトを書き始めました。デザインがなかったので、Baiduでh5勝者ソフトウェアのWebサイトを見つけてコピーしました。少し壊れていると思いましたが、変更しました。内容を変更します。

まずリスト表示の作成を開始します

vueインスタンスの準備ができたら、オブジェクトにデフォルトデータを追加すると、リストが正常にロードされます。ソースコードをチェックして、それが意図したものであるかどうかを確認してください。現在、リストには初期化されたデフォルトの配列のみが表示されていますが、初期化された配列に id フィールドと番号を追加してみてください

これは詐欺です。キャッシュは特に深刻です。キャッシュをクリアするか、強制的に更新する必要があります。 vue はコンソールでエラーを発生し、a タグの内容 (Article 1) が {{id }} 文法的な間違いがあり、ドキュメントを確認しましたが、同様の例がなかったので、自分の経験に基づいて書き直してみました
しばらくして、ドキュメントが理想的ではないことがわかりました。十分に読んでいない場合は、それをターゲットにする必要があります。タグのクラスとスタイルがバインドされているのを見ると、オブジェクト構文と配列構文があることがわかりました。早速、最初にオブジェクトの書き込みメソッドを a タグに記述し、更新して効果を確認しました。 aタグのhrefがこのdetail/[object object ]みたいになってて笑った。

配列構文の説明を読んだ後、私はまだ間違って使用していたようです、記事 1 これで動作します

なぜ配列構文と呼ばれるのですか? まだ理解できません。なぜこの場所はこのようにしか書けないのでしょうか? 似たような安全性を見つけて、私が書いた内容があまりにもひどいことに気づきました

まず、コード

<tr v-for="item in Strategys" class="ng-scope">
 <td>
　　<a class="ng-binding ng-scope" v-bind:href="[&#39;xxx/detail/&#39;+item.Id]" rel="external nofollow" rel="external nofollow" >{{item.Name}}</a>
 </td>

ログイン後にコピー

データブロックを入れてみましょう。コード

var vm = new Vue({
　　el: '#section-strategies',
　　data: {
　　　　　　parentMessage: 'Parent',
　　　　　　StrategyCnt:0,
　　　　　　Strategys: [{id:1,name:'文章1'}，{id:2,name:'文章2'}]
　　}
 })

ログイン後にコピー

次のステップは、Ajax を使用してサーバーデータをリクエストすることです。常に初期化とデフォルトデータを使用することは不可能です

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、お支払いください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

複数のページをサポートするために create-react-app を変更する方法

select を使用せずに vue でドロップダウンボックス関数を実装する方法

以上がvue タグ属性のデータバインディングとスプライシングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。