Vue.js 表单控件绑定 v-model

简介:

v-model  主要用于input、textarea、select等表单控件元素上创建双向数据绑定,所谓双向绑定就是js中vue实例化的data对象的数据与其渲染的dom元素上的内容保持一致


1、text 文本

1
2
3
4
< div  id = "app" >
     < h1 >`message`</ h1 >
     < input  type = "text"  v-model = "message" />
</ div >
1
2
3
4
5
6
new  Vue({
     el: '#app' ,
     data:{
         message: 'Hello World !'
     }
})

查看页面效果,随着文本输入框种的内容发生改变,与Vue实例中data绑定的h1的内容也相应发生改变

wKiom1gA5HSifXEYAAB-S5T8qL0353.png

2、textarea  多行文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--多行文本-->
< div  id = "text" >
     < p >Multiline message is: `msg`</ p >
     < textarea  v-model = "msg" ></ textarea >
</ div >
 
< script  src = "https://unpkg.com/vue/dist/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#text',
         data:{
             msg:''
         }
     })
</ script >


3、checkbox  复选框

(1)、单个勾选框,逻辑值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--单个勾选框,逻辑值-->
< div  id = "app" >
     < input  type = "checkbox"  id = "checkbox"  v-model = "checked" >
     < label  for = "checkbox" >`checked`</ label >
</ div >
 
< script  src = "https://unpkg.com/vue/dist/vue.js" ></ script >
< script >
     var vm1 = new Vue({
         el:'#app',
         data:{
             checked:true
         }
     });
</ script >


(2)、多个勾选框,绑定到同一个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--多个勾选框,绑定到同一个数组-->
<div id= "app1" >
     <input type= "checkbox"  id= "jack"  value= "jack"  v-model= "checkNames" >
     <label  for = "jack" >Jack</label>
     <input type= "checkbox"  id= "jhon"  value= "jhon"  v-model= "checkNames" >
     <label  for = "jhon" >Jhon</label>
     <input type= "checkbox"  id= "mike"  value= "mike"  v-model= "checkNames" >
     <label  for = "mike" >Mike</label>
     <p>Checked Names: `checkNames`</p>
</div>
 
<script src= "https://unpkg.com/vue/dist/vue.js" ></script>
<script>
     var  vm1 =  new  Vue({
         el: '#app' ,
         data:{
             checked: true
         }
     });
</script>


4、radio 单选按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--单选按钮-->
< div  id = "app2" >
     < input  type = "radio"  id = "male"  value = "male"  v-model = "gender" >
     < label  for = "male" >Male</ label >
     < input  type = "radio"  id = "female"  value = "female"  v-model = "gender" >
     < label  for = "female" >Female</ label >
     < p >Gender: `gender`</ p >
</ div >
 
< script  src = "https://unpkg.com/vue/dist/vue.js" ></ script >
< script >
     var vm3 = new Vue({
         el:'#app2',
         data:{
             gender:''
         }
     });
</ script >


5、select 选择列表

(1)、单选列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--单选列表-->
< div  id = "app3" >
     < select  v-model = "selected" >
         < option >A</ option >
         < option >B</ option >
         < option >C</ option >
     </ select >
     < p >Selected: `selected`</ p >
</ div >
 
< script  src = "https://unpkg.com/vue/dist/vue.js" ></ script >
< script >
     var vm4 = new Vue({
         el:'#app3',
         data:{
             selected:''
         }
     });
</ script >


(2)、多选列表,绑定到一个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--多选列表-->
< div  id = "app4" >
     < select  v-model = "selected"  multiple>
         < option >A</ option >
         < option >B</ option >
         < option >C</ option >
     </ select >
     < p >Selected: `selected`</ p >
</ div >
 
< script  src = "https://unpkg.com/vue/dist/vue.js" ></ script >
< script >
     var vm5 = new Vue({
     el:'#app4',
     data:{
         selected:[]
     }
});
</ script >


动态选项,用v-for渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--动态选项,用v-for渲染-->
< div  id = "app5" >
     < select  v-model = "selected" >
         < option  v-for = "option in options"  v-bind:value = "option.value" >`option`.`text`</ option >
     </ select >
     < p >Selected: `selected`</ p >
</ div >
 
< script  src = "https://unpkg.com/vue/dist/vue.js" ></ script >
< script >
     var vm6 = new Vue({
     el:'#app5',
     data:{
         selected:'A',
         options:[
             {text:'One', value:'A'},
             {text:'Two', value:'B'},
             {text:'Three', value:'C'}
         ]
     }
});
</ script >


绑定Value

对于单选按钮,勾选框及选择列表选项,v-model绑定的数据通常是静态字符串(对于勾选框是逻辑值)

1
2
3
4
5
6
7
8
9
10
<!-- 当选中时,`picked` 为字符串 "a" -->
< input  type = "radio"  v-model = "picked"  value = "a" >
 
<!-- `toggle` 为 true 或 false -->
< input  type = "checkbox"  v-model = "toggle" >
 
<!-- 当选中时,`selected` 为字符串 "abc" -->
< select  v-model = "selected" >
     < option  value = "abc" >ABC</ option >
</ select >


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

1
2
3
4
5
6
7
8
9
<!--复选框-->
< div  id = "app1" >
     < input  type = "checkbox"  v-model = "toggle"  v-bind:true-value = "a"  v-bind:false-value = "b" >
</ div >
 
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b


单选按钮

1
2
3
< input  type = "radio"  v-model = "pick"  v-bind:value = "a" >
 
// 当选中时vm.pick === vm.a


选择列表设置

1
2
3
4
5
6
7
8
< select  v-model = "selected" >
     <!-- 内联对象字面量 -->
     < option  v-bind:value = "{ number: 123 }" >123</ option >
</ select >
 
// 当选中时
typeof vm.selected   // -> 'object'
vm.selected.number   // -> 123



同时,我们也可以通过 过滤器的方式去监控页面内容变化

1
2
3
4
5
6
7
< div  id = "app" >
     < h1 >`message`</ h1 >
     < input  type = "text"  v-model = "message" />
     < pre >
         {{$data|json}}
     </ pre >
</ div >

wKiom1gA5megLSPtAACGZ89UW8k388.png




修饰符

除了以上用法,v-model指令后面还可以添加多个参数(number、lazy、debounce)


1、number

如果想将用户的输入自动转换为Number类型(如果原始值得转换结果为NaN,则返回原值),则可以添加一个number特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id= "app" >
     <input type= "text"  v-model= "msg"  number><br>
     `msg`
</div>
 
<script src= "js/vue.js" ></script>
<script>
     new  Vue({
         el: '#app' ,
         data:{
             msg: '仅处理number类型的数字'
         }
     })
</script>
 
<!-- 另外一种写法   
<div id= "app1" >
     <input v-model.number= "age"  type= "text" >
     <p>My age is: `age`</p>
</div> 
 
-->

wKioL1gsa6WQDqimAAA0ygGJxPA119.png

wKiom1gsa7LCf5yLAAA4a09xzwQ603.png


2、lazy

在默认情况下,v-model在input事件中同步输入框的值与数据,我们可以添加一个lazy特性,从而将数据改到在change事件中发生。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id= "app" >
     <input type= "text"  v-model= "msg"  lazy><br>
     `msg`
</div>
<script src= "js/vue.js" ></script>
<script>
     new  Vue({
         el: '#app' ,
         data:{
             msg: '内容是在change事件后才改变的'
         }
     })
</script>


我们在input输入框中输入内容,虽然触发了input事件,但是因为加入了lazy属性,msg的值一直没有发生变化。

wKioL1gsZ2zyYvtLAABTKVCaazE363.png

一直到input输入框发生change事件之后

wKioL1gsZ8GzgDPvAABLmET1mtQ399.png


3、debounce

设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如:在input中输入内容时要随时发送AJAX请求),那么它较为有用

1
2
3
4
5
6
7
8
9
10
11
12
<div id= "app" >
  <input type= "text"  v-model= "msg"  debounce= "5000" ><br>
  `msg`
</div>
<script src= "js/vue.js" ></script>
<script>
  new  Vue({
   el: '#app' ,
   data:{
    msg: '内容是在5s后才改变的'
   }
  })

wKiom1gsajnwH8V2AABX17-R-Qw068.png



改变input输入框中的内容,msg的值没有马上改变,5s后才发生改变

wKioL1gsarriXnmYAABlyAicIdk999.png


4、.trim

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< div  id = "app1" >
     < input  v-model = "msg1"  type = "text" >
     < p >The common message is: `msg1`</ p >
     < hr >
     < input  v-model.trim = "msg2"  type = "text" >
     < p >The trim message is: `msg2`</ p >
</ div >
 
 
< script  src = "https://unpkg.com/vue/dist/vue.js" ></ script >
< script >
     var vm1 = new Vue({
         el:'#app1',
         data:{
             msg1:'',
             msg2:''
         }
     })

wKiom1guqSLj_D88AAAJsQ8YC1w773.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1862199

相关文章
|
2月前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
243 59
|
22天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
126 64
|
22天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
103 60
|
29天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
29 1
vue学习第九章(v-model)
|
22天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
28 8
|
22天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
21 1
|
22天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
32 1
|
22天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
1月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
24 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
46 3
下一篇
DataWorks