表单输入绑定

表单输入绑定

1. 双向绑定

数据的绑定，无论是使用插值表达式 { {}} 还是 v-text 指令，对于数据间的交互都是单向的，只能将 Vue 实例里定义的值传递给页面，页面数据的任何操作无法传递给 model

1-1 v-model使用

可以用 v-model 指令在表单 、</code> 及 <code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素</p> <p><code>v-model</code> 是语法糖，默认情况下相当于 <code>:value</code> 和 <code>@input</code>，负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理</p> <blockquote> <p><code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> 属性的初始值而总是将 <code>Vue</code> 实例的数据作为数据来源。你应该通过 <code>JavaScript</code> 在组件的 <code>data</code> 选项中声明初始值</p> </blockquote> <p><code>v-model</code> 在内部为不同的输入元素使用不同的属性并抛出不同的事件：</p> <ul> <li><code>text</code> 和 <code>textarea</code> 元素使用 <code>value</code> 属性和 <code>input</code> 事件</li> <li><code>checkbox</code> 和 <code>radio</code> 使用 <code>checked</code> 属性和 <code>change</code> 事件</li> <li><code>select</code> 字段将 <code>value</code> 作为 <code>prop</code> 并将 <code>change</code> 作为事件</li> </ul> <pre><code class="prism language-html"><span class="token comment"><!-- v-model用于表单与数据双向绑定 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inputValue<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hello Vue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>{ {inputValue}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token comment"><!-- v-model会忽略所有变表单的属性初始值，会用Vue实例数据作为属性值 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textareValue<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hello Vue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>{ {textareValue}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-js"><span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">return</span> <span class="token punctuation">{ </span> <span class="token literal-property property">inputValue</span><span class="token operator">:</span> <span class="token string">'文本框双向绑定'</span><span class="token punctuation">,</span> <span class="token literal-property property">textareValue</span><span class="token operator">:</span> <span class="token string">'文本域双向绑定'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <h4>1-1 文本</h4> <p>文本框双向绑定是通过动态绑定元素的 <code>value</code> 属性，以及触发文本框的 <code>input</code> 事件来实现的</p> <pre><code class="prism language-html"><span class="token comment"><!-- 文本框通过:value绑定属性 @input触发事件修改属性值 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inputValue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>{ {inputValue}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="prism language-js"><span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span> <span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">return</span> <span class="token punctuation">{ </span> <span class="token literal-property property">inputValue</span><span class="token operator">:</span> <span class="token string">'文本双向绑定'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <h4>1-2 多行文本</h4> <p>文本域多行文本双向绑定是通过动态绑定元素的 <code>value</code> 属性，以及触发文本域的 <code>input</code> 事件来实现的</p> <blockquote> <p>在文本区域插值 (<code><textarea>{ {text}}) 并不会生效，应用 v-model 来代替

<textarea v-model="textareaValue">textarea>


<h3>{
  {textareaValue}}h3>

el: '#app',
data: function() {
   
  return {
   
    textareaValue: 'Hello Vue'
  }
}

1-3 复选框

复选框双向绑定是通过动态绑定元素的 checked 属性，以及触发复选框的 change 事件来实现的

• 绑定单个复选框使用布尔值
• 绑定多个复选框使用数组

复选框如果不提供 value 属性，则表示复选框绑定的是 checked 属性，提供 value 属性，则表示复选框绑定的是 value 属性

<input type="checkbox" v-model="checked">
<h3>{
  {checked}}h3>


<label for="">篮球label>
<input type="checkbox" v-model="checkboxArr"  value="篮球">

<label for="<