vue基础——表单输入绑定

一、基础用法

你可以用 v-model 指令在表单 及 </span></strong> 元素上创建双向数据绑定。它会根据控件类型自动选择正确的方法来更新元素。</p> <p>尽管有些神奇&＃xff0c;但 <strong><span >v-model</span></strong> 本质上不过是语法糖。它不择监听用户的输入事件以更新数据&＃xff0c;并对一些极端场景进行一些特殊处理。</p> <p>注意&＃xff1a;<strong><span > v-model</span> </strong>会忽略所有表单元素的 <strong><span >value</span></strong>、<span ><strong>checked</strong></span>、<strong><span >selected</span> </strong>特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过Javascript在组件的 <strong><span >data</span> </strong>选项中声明初始值。</p> <p>注意&＃xff1a;对于需要使用<strong>输入法</strong>(如中文、日文、韩文等)的语言&＃xff0c;你会发现<strong><span > v-model</span> </strong>不会在输入法组合文字过程中得到更新。如果你也想处理这个过程&＃xff0c;请使用 <strong><span >input</span> </strong>事件。</p> <p><strong><span >1.1文本</span></strong></p> <div class="cnblogs_code"> <p><span >1</span> <span ><</span><span >input </span><span >v-model</span><span >&＃61;"message"</span><span > placeholder</span><span >&＃61;"edit me"</span><span >>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML</span><br><span >2</span> <span ><</span><span >p</span><span >></span>Message is: {{ message }}<span ></</span><span >p</span><span >></span></pre> </div> <p>结果&＃xff1a;</p> <p><img src="https://img7.php1.cn/3cdc5/c837/4aa/85bfaed52d8ff8fd.png" alt="" /></p> <p><strong><span >1.2多行文本</span></strong></p> <div class="cnblogs_code"> <p><span >1</span> <span ><</span><span >span</span><span >></span>Multiline message is:<span ></</span><span >span</span><span >>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 HTML</span><br><span >2</span> <span ><</span><span >p </span><span >style</span><span >&＃61;"white-space: pre-line;"</span><span >></span>{{ message }}<span ></</span><span >p</span><span >></span><br><span >3</span> <span ><</span><span >br</span><span >></span><br><span >4</span> <span ><</span><span >textarea </span><span >v-model</span><span >&＃61;"message"</span><span > placeholder</span><span >&＃61;"add multiple lines"</span><span >></</span><span >textarea</span><span >></span></pre> </div> <p>结果&＃xff1a;</p> <p><img src="https://img7.php1.cn/3cdc5/c837/4aa/bbeead989b96381a.png" alt="" /></p> <p>注意&＃xff1a;在文本区域插值(<strong><span ><textarea>)并不会生效&＃xff0c;应用 v-model 来代替。

1.3复选框

单个复选框&＃xff0c;绑定到布尔值&＃xff1a;

结果&＃xff1a;

1.3.1多个复选框&＃xff0c;绑定到同一个数组

结果&＃xff1a;

1.4单选按钮

结果&＃xff1a;

1.5选择框

单选时&＃xff1a;

结果&＃xff1a;

注意&＃xff1a;如果 v-model 表达式的初始值未能匹配任何选项&＃xff0c; 元素将被渲染为"未选中"状态。在IOS中&＃xff0c;这回使用户无法选择第一个选项。因为这样的情况下&＃xff0c;IOS不会触发change事件。因此&＃xff0c;更推荐像上面这样提供一个值为空的禁用选项。

多选时(绑定到同一个数组)

1 <div id&＃61;"example-6">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2 <select v-model&＃61;"selected" multiple style&＃61;"width: 50px;">
3 <option>Aoption>
4 <option>Boption>
5 <option>Coption>
6 select>
7 <br>
8 <span>Selected: {{ selected }}span>
9 div>

1 new Vue({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 JS
2 el: &＃39;#example-6&＃39;,
3 data: {
4 selected: []
5 }
6 })

结果&＃xff1a;

用 v-for 渲染的动态选项&＃xff1a;

1 <select v-model&＃61;"selected">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2 <option v-for&＃61;"option in options" v-bind:value&＃61;"option.value">
3 {{ option.text }}
4 option>
5 select>
6 <span>Selected: {{ selected }}span>

1 new Vue({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 JS
2 el: &＃39;...&＃39;,
3 data: {
4 selected: &＃39;A&＃39;,
5 options: [
6 { text: &＃39;One&＃39;, value: &＃39;A&＃39; },
7 { text: &＃39;Two&＃39;, value: &＃39;B&＃39; },
8 { text: &＃39;Three&＃39;, value: &＃39;C&＃39; }
9 ]
10 }
11 })

结果&＃xff1a;

 

二、值绑定

---

 

 对于单选按钮&＃xff0c;复选框及选择框的选项&＃xff0c; v-model 绑定的值通常是静态字符串(对于复选框也可以是布尔值)&＃xff1a;

1 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 HTML
2 <input type&＃61;"radio" v-model&＃61;"picked" value&＃61;"a">
3
4
5 <input type&＃61;"checkbox" v-model&＃61;"toggle">
6
7
8 <select v-model&＃61;"selected">
9 <option value&＃61;"abc">ABCoption>
10 select>

但是有时我们可能想把值绑定到Vue实例的一个动态属性上&＃xff0c;这时可以用 v-bind 实现&＃xff0c;并且这个属性的值可以不是字符串。

2.1复选框

1 <input　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2 type&＃61;"checkbox"
3 v-model&＃61;"toggle"
4 true-value&＃61;"yes"
5 false-value&＃61;"no"
6 >

1 // 当选中时　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　JS
2 vm.toggle &＃61;&＃61;&＃61; &＃39;yes&＃39;
3 // 当没有选中时
4 vm.toggle &＃61;&＃61;&＃61; &＃39;no&＃39;

注意&＃xff1a;这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性&＃xff0c;因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中的这两个值中的一个能够被提交(比如"yes"或"no"),请换用单选按钮。

2.2单选按钮

1 <input type&＃61;"radio" v-model&＃61;"pick" v-bind:value&＃61;"a">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML

1 // 当选中时　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 JS
2 vm.pick &＃61;&＃61;&＃61; vm.a

2.3选择框的选项

1 <select v-model&＃61;"selected">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2
3 <option v-bind:value&＃61;"{ number: 123 }">123option>
4 select>

1 // 当选中时　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 JS
2 typeof vm.selected // &＃61;> &＃39;object&＃39;
3 vm.selected.number // &＃61;> 123

 

三、修饰符

---

.lazy

在默认情况下&＃xff0c; v-model 在每次 input 事件触发之后将输入框的值与数据进行同步(除了上述输入法组合文字时)。你可以添加 lazy 修饰符&＃xff0c;从而转变为使用 change 事件进行同步&＃xff1a;

1 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2 <input v-model.lazy&＃61;"msg" >

.number

如果想自动将用户的输入值转为数值类型&＃xff0c;可以给 v-model 添加 number 修饰符&＃xff1a;

1 <input v-model.number&＃61;"age" type&＃61;"number">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML

这通常很有用&＃xff0c;因为即使在 type&＃61;"number" 时&＃xff0c;HTML输入元素的值也总会返回字符串。

.trim

如果要自动过滤用户输入的首尾空白字符&＃xff0c;可以给 v-model 添加 trim 修饰符&＃xff1a;

1 <input v-model.trim&＃61;"msg">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML

 

四、在组件上使用 v-model

---

PS&＃xff1a;如果你还不熟悉Vue的组件&＃xff0c;可以暂且跳过这里。

HTML原生的输入元素类型并不总能满足需求。型号&＃xff0c;Vue的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和 v-model 一起使用&＃xff01; 要了解更多&＃xff0c;请参考组件指南中的自定义输入组件。

 

转:https://www.cnblogs.com/zhanzhuang/p/9257475.html

• vue
• input
• text
• select
• java
• ip
• html
• checkbox
• label

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册