.sync&v-model

.sync修饰符

sync的使用：https://codesandbox.io/s/quirky-leaf-8x09l
:xxx.sync="yyy"
是
v-bind:xxx="yyy"
v-on:update:xxx="yyy=$event"
的语法糖

v-model指令

v-model指令<input>、<textarea> 及 <select> 元素上创建双向数据绑定

标签

type=”text”

（多行文本与此相同）<br /><code>v-model="xxx"</code><br />是<br /><code>v-bind:value="xxx"</code><br /><code>v-on:input="xxx=$event.target.value"</code><br />这两句代码的语法糖<br /><strong><code>v-model</code>**</strong><code>.lazy</code><strong>**<code>="xxx"</code></strong>会将绑定input改为change事件</p> <p><a name="vsu7N"></a></p> <h4 id="j6wvj"><a name="j6wvj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>type=”checkbox”</h4><p><strong>绑定到布尔值：</strong><br /><code>v-model="xxx"（布尔值或字符串）</code><br />是<br /><code>v-bind:checked="xxx"</code><br /><code>v-on:change="xxx=$event.target.checked"</code><br />这两句的语法糖</p> <p>绑定到布尔值后有两个属性 <code>true-value="yyy"</code>，<code>false-value="zzz"</code><br />当选中时 xxx= ‘yyy’，没有选中时 xxx=’zzz’</p> <p><strong>绑定到数组</strong><br /><code>v-model="xxx"（数组）</code><br />是</p> <p><code>v-on:change = "$event.target.checked</code><br /><code>? xxx.push($event.target.value)</code><br /><code>: xxx.splice(xxx.indexOf($event.target.value),1)"</code><br />的语法糖</p> <p><a name="FrYfO"></a></p> <h4 id="2w1s3g"><a name="2w1s3g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>type=”radio”</h4><p><code>v-model="xxx"（字符串）</code><br />是<br /><code>v-on:change="xxx=$event.target.value"</code><br />的语法糖</p> <p><a name="RodR9"></a></p> <h3 id="gf2mf2"><a name="gf2mf2" class="reference-link"></a><span class="header-link octicon octicon-link"></span><select>标签</h3><p>在<strong><select></strong>上的<code>v-model="xxx "(字符串)</code><br />是<br /><code>v-on:change="xxx=$event.target.value"</code><br />的语法糖</p> <p><a name="7fqm4"></a></p> <h3 id="3y3on2"><a name="3y3on2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>修饰符</h3><p><a name="gmT24"></a></p> <h4 id="9yoh43"><a name="9yoh43" class="reference-link"></a><span class="header-link octicon octicon-link"></span>.lazy</h4><p>可以使<code>v-model</code>指令的绑定事件从<strong>input</strong>改为<strong>change</strong><br />** <a name="OPB9F"></a></p> <h4 id="3jo5cm"><a name="3jo5cm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>.number</h4><p>可以使<strong>input</strong>的输入值通过<code>parseFloat</code>解析成<strong>number</strong>类型，值无法被解析时，返回原始值<br />（如果只写type=”number”，得到的也只是类型为<strong>字符串的数字</strong>）<br />** <a name="fU3qM"></a></p> <h4 id="3lyfk2"><a name="3lyfk2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>.trim</h4><p>可以自动过滤掉输入的<strong>首尾空白字符串</strong><br /><strong><br /></strong></p>