一般的な Vue 命令を 1 回の操作で取得する

この記事では、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:&#39;zs1&#39;},
        {id:2, name:&#39;zs2&#39;},
        {id:3, name:&#39;zs3&#39;},
        {id:4, name:&#39;zs4&#39;},
        {id:5, name:&#39;zs5&#39;},
        {id:6, name:&#39;zs6&#39;},
      ]
}
   <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

/*
  对象
  */
  data:{
      user:{
        id:1,
        name:&#39;托尼.贾&#39;,
        gender:&#39;男&#39;
      }
 }
 <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 :属性名=" &#39;常量&#39; "></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 サイトの他の関連記事を参照してください。