ElementUI vue v-modelの修飾子

v-modelの修飾子

v-model.Lazyはinput入力ボックスにblurが1つ発生した場合にのみ

をトリガする.

v-model.trimユーザーが入力した前後のスペースを

削除

v-model.numberは、ユーザが入力文字列をnumber

に変換する.
(1)input type=text
v-modelを使用してinput入力ボックスをnameにバインドすると、入力ボックスが変更され、nameの値も同期して変更されます.

<input type="text" v-model="name"><br />
<span> {{ name }} span>

しかし、これは使用に影響を与えるので、v-modelの修飾子lazy、v-modelを使用することができます.Lazyはinput入力ボックスにblurが発生した場合にのみトリガーされます

<input type="text" v-model.lazy="name"><br />
<span> {{ name }} span>

v-model.trimはユーザーが入力した前後のスペースを消して、私たちは入力ボックスに多くのスペースを入力してから内容を入力します.下のspanは元のままで、スペースは多くありません.HTMLは1つのスペースしか表示されませんが、nameの値は違います.これらのスペースを計算して、spanにpreラベルを付けることができます.このとき、これらのスペースは表示されます.

<input type="text" v-model="name"><br />
<pre><span> {{ name }} span>pre>

　　v-model.trimはこれらの余分なスペースを消去するために使用されます.もちろん、パスワードなどの入力ボックスであれば、この修飾を加えないでください.一部のユーザーはスペースでパスワードを作ることができます.

<input type="text" v-model.trim="name"><br />
<pre><span> {{ name }} span>pre>

このとき、前後にどれだけのスペースを追加してもクリアされます.

v-model.number             number
<input type="text" v-model="age"><br />
<span> {{ age }} span>

この場合、入力した数字は自動的に文字列に変換され、consoleでappすることができます.ageを追加すると表示されます.number

<input type="text" v-model.number="age"><br />
<span> {{ age }} span>

入力した数字をnumberに変換し、consoleでappします.ageビューはnumberタイプです.
(2)input type=textarea
v-modelはinput textarea selectで使用され、前はinputのtype=textで使用されていましたが、textareaでは同じで、唯一の違いはこれが複数行です.
(3)input type=radio

 ：<input v-model="sex" type="radio" value="male">
 ：<input v-model="sex" type="radio" value="famale">
　　<br />
   <span> {{ sex }} span>

(4)input type=checkbox

 ：<input v-model="sexual_orientation" type="checkbox" value="male">
 ：<input v-model="sexual_orientation" type="checkbox" value="famale">
   <br />
   <span> {{ sexual_orientation }} span>
     

(5)select

<select v-model="from" name="" id="">
<option name="  " value="1">  option>
<option name="  " value="2">  option>
select>
<span>{{ from }}span>

<select v-model="from" name="" id="" multiple>
<option name="  " value="1">  option>
<option name="  " value="2">  option>
<option name="  " value="3">  option>
<option name="  " value="4">  option>
select>
<span>{{ from }}span>