この記事では、Vue の一般的な命令について詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
テキストの挿入:
v-text
要素の innerText 属性と同等で、二重ラベルである必要があります
HTML の挿入:
要素の innerHTML 属性と同等
ループ トラバーサル
item 属性に加えて v-for を使用すると、その他の補助属性です
/* 在html中使用v-for指令进行渲染 */ /* 普通数组 */ data:{ list:[1,2,3,4,5,6] } <p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p> /* 对象数组 */ data:{ list:[1,2,3,4,5,6], listObj:[ {id:1, name:'zs1'}, {id:2, name:'zs2'}, {id:3, name:'zs3'}, {id:4, name:'zs4'}, {id:5, name:'zs5'}, {id:6, name:'zs6'}, ] } <p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p> /* 对象 */ data:{ user:{ id:1, name:'托尼.贾', gender:'男' } } <p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p> /* 数字 <!-- 注意:如果使用v-for迭代数字的话,前面 count 的值从 1 开始--> */ <p v-for="count in 10">这是第{{count}}次循环</p>
条件付きレンダリング
v-if: 要素を挿入するかどうか
v-要素を非表示にし、CSS に従って要素をレンダリングするかどうかを示します
属性バインディング
v-bind: 属性名 = "定数 || 変数名"
省略形: 属性名 = "定数 || 変数名"
<p v-bind:属性名="变量"></p> //可以简写成 <p :属性名="变量"></p> //如果要赋值常量,需要给常量用单引号包起来,如 <p :属性名=" '常量' "></p>
双方向バインディング: v-model
いわゆる双方向バインディングとは、ビュー レイヤの値を変更すると、vue の対応する値も変更されることを意味します。 value 属性を持つ要素のみを双方向データにバインドできます。
バインディング イベント: v-on
v-on:click = "メソッド名 || vue 内部変数を直接変更",
省略形: @click = " メソッドname || vue 内部変数を直接変更します。"
<p v-on:click=" num = 1 "></p> //可以简写成 <p @click=" num = 1 "></p>
スキップ要素ノード
v-pre: この要素とそのサブ要素のコンパイル プロセスをスキップします。オリジナルのMustacheタグを表示するために使用できます。指示なしで多数のノードをスキップすると、コンパイルが高速化されます。
一度だけレンダリング
v-once: 要素とコンポーネントを一度だけレンダリングします。その後の再レンダリングでは、要素/コンポーネントとそのすべての子は静的コンテンツとして扱われ、スキップされます。これを使用して、更新パフォーマンスを最適化できます。
推奨学習: vue.js チュートリアル
以上が一般的な Vue 命令を 1 回の操作で取得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。