09-vue.js-フォーム入力バインド

6630 ワード

フォーム入力バインディング
基本的な使い方v-model命令は、フォーム、

</code>   <code><select/></code>            。                      。      ，  <code>v-model</code>          。                 ，                。</p> 
 </blockquote> 
 <blockquote> 
  <p><code>v-model</code>            <code>value</code>、<code>checked</code>、<code>selected</code>            Vue            。      JavaScript      <code>data</code>         。</p> 
 </blockquote> 
 <blockquote> 
  <p><code>v-model</code>                           ：</p> 
 </blockquote> 
 <ul> 
  <li>text   textarea      <code>value</code>     <code>input</code>   ；</li> 
  <li>checkbox   radio    <code>checked</code>     <code>change</code>   ；</li> 
  <li>select     <code>value</code>    prop    <code>change</code>     。</li> 
 </ul> 
 <p>          (   、  、   )    ，     <code>v-model</code>                  。           ，    <code>input</code>   。</p> 
 <h3>  </h3> 
 <pre><code><input v-model="message" placeholder="edit me"/>
<p>Message is: {{ message }}</p>
</code></pre> 
 <h3>    </h3> 
 <pre><code><span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br/>
<textarea v-model="message" placeholder="add multiple lines"/>
</code></pre> 
 <blockquote> 
  <p><strong>        (<code><textarea>{{text}}

)では有効ではなく、v-modelを適用して置き換えることができる.
チェックボックス
ブール値にバインドされた単一のチェックボックス:


{{ checked }}

同じ配列にバインドされた複数のチェックボックス:


  
  Jack
  
  John
  
  Mike
  

  Checked names: {{ checkedNames }}

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

ラジオボタン


  
  One
  

  
  Two
  

  Picked: {{ picked }}

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

選択ボックス
単一選択:


  
  Selected: {{ selected }}

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

v-model式の初期値がオプションに一致しない場合、







Selected: {{ selected }}

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

v-forでレンダリングされたダイナミックオプション:


Selected: {{ selected }}

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

値バインド
ラジオボタン、チェックボックス、および選択ボックスのオプションの場合、v-modelでバインドされた値は通常、静的文字列です(チェックボックスの場合はブール値でも構いません):

しかし、Vueインスタンスの動的属性に値をバインドしたい場合があります.この場合、v-bindで実装でき、この属性の値は文字列でなくてもよいです.
チェックボックス

//     
vm.toggle === 'yes'
//       
vm.toggle === 'no'

ここでのtrue-valueおよびfalse-valueのプロパティは、ブラウザがフォームをコミットするときに選択されていないチェックボックスを含まないため、入力コントロールのvalueのプロパティに影響しません.フォームの2つの値のうちの1つがコミットされることを確認する場合は、「yes」または「no」など)、ラジオボタンに切り替えます.
ラジオボタン

//     
vm.pick === vm.a

選択ボックスのオプション

//     
typeof vm.selected // => 'object'
vm.selected.number // => 123

修飾子.lazy
デフォルトでは、v-modelは、inputイベントがトリガーされるたびに、入力ボックスの値をデータと同期させる(上記の入力方式が文字を組み合わせた場合を除く).lazy修飾子を追加して、changeイベントを同期するように変更できます.

.number
ユーザーの入力値を自動的に数値タイプに変換するには、v-modelにnumber修飾子を追加します.

これは、type="number"でもHTML入力要素の値が文字列を返すため、通常便利です.この値がparseFloat()で解析できない場合は、元の値が返されます..trim
ユーザーが入力した先頭と末尾の空白文字を自動的にフィルタする場合は、v-modelにtrim修飾子を追加できます.

コンポーネントにv-modelを使用
HTMLオリジナルの入力要素タイプは必ずしもニーズを満たすものではありません.幸いなことに、Vueのコンポーネントシステムでは、完全にカスタム動作で多重化可能な入力コンポーネントを作成できます.これらの入力コンポーネントはv-modelと一緒に使用することもできます!

NDK動的登録

ASP.NET MS SQL Serverのインストールインスタンスの取得