Vue.js框架 v-model指令

发布时间：2023-09-06 01:55责任编辑：胡小海关键词：js 指令

v-model指令在表单<input>及<textarea>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值。

对于需要使用输入法(如中文、日文、韩文等) 的语言，你会发现v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。

一、input输入框绑定实例：

实现思路：

分别定义data下的name,age,like，作为其初始值，当input输入框内的信息变化时，下面内容会发生变化，并更改data下的值。

全部代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><scriptsrc="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><scriptsrc="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><!--学生成绩表--><divid="app"class="container"><divclass="col-xs-4col-md-offset-4"><h1>个人信息</h1><div>姓名:<inputtype="text"v-model="name"class="form-controltext-center"placeholder="请输入你的个人信息"><pre>{{name}}</pre></div><div>年龄:<inputtype="text"v-model="age"class="form-controltext-center"placeholder="年龄"><span>{{age}}</span></div><div>爱好:<inputtype="text"v-model="like"class="form-controltext-center"placeholder="爱好"><span>{{like}}</span></div></div></div><script>varapp=newVue({el:"#app",data:{name:"李四",age:24,like:"跑步"},computed:{sum:function(){returnthis.math+this.physics+this.english},average:function(){returnMath.round((this.sum/3))}}})</script></body></html>

核心代码：<divid="app"class="container"><divclass="col-xs-4col-md-offset-4"><h1>个人信息</h1><div>姓名:<inputtype="text"v-model="name"class="form-controltext-center"placeholder="请输入你的个人信息"><pre>{{name}}</pre></div><div>年龄:<inputtype="text"v-model="age"class="form-controltext-center"placeholder="年龄"><span>{{age}}</span></div><div>爱好:<inputtype="text"v-model="like"class="form-controltext-center"placeholder="爱好"><span>{{like}}</span></div></div></div><script>varapp=newVue({el:"#app",data:{name:"李四",age:24,like:"跑步"},})</script>

v-model的修饰符

input事件触发后将输入框的值与数据进行同步，当我们不想其更新太频繁的时候，就可以选择使用.lazy修饰符，就可以让其更新频率降低。此外input输入内容的类型均为字符格式，对于一些固定是数字的格式我们可以使用.number修饰符将其转换为数字，方便运算操作，不需要后期转换类型。

`.lazy`

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

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

`.number`

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

<input v-model.number="age" type="number">

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

在data定义的age为×××的数字，当我们重新输入内容时，发现其变为字符类型，这时我们可以加上.number的修饰符

添加.number修饰符后

`.trim`

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

<inputv-model.trim="msg">

未添加.trim属性前（注意普通的html对空格不敏感一般默认为一个，这里引入<pre></pre>标签）

添加其修饰符后

二、input 输入框类型为单选框

<h2>性别</h2><label>男：<inputtype="radio"v-model="sex"value="male"class=""></label><label>女<inputtype="radio"v-model="sex"value="female"></label><hr>性别：{{sex}}<script>varapp=newVue({el:"#app",data:{name:"李四",age:24,like:"跑步",sex:'female'},})</script>

三、input 输入框类型为复选框

<h2>爱好：</h2><labelclass="btnbtn-default">跑步<inputtype="checkbox"v-model="like"value="跑步"></labelclass="btnbtn-default"><labelclass="btnbtn-default">爬山<inputtype="checkbox"v-model="like"value="爬山"></label><labelclass="btnbtn-default">阅读<inputtype="checkbox"v-model="like"value="阅读"></label><labelclass="btnbtn-default">游泳<inputtype="checkbox"v-model="like"value="游泳"></labelclass="btnbtn-default"><labelclass="btnbtn-default">逛街<inputtype="checkbox"v-model="like"value="逛街"></label><labelclass="btnbtn-default">健身<inputtype="checkbox"v-model="like"value="健身"></label><hr>爱好：{{like}}<script>varapp=newVue({el:"#app",data:{name:"李四",age:24,info:"长江后浪推前浪",sex:'female',like:[]},})</script>

四、多行文本textarea

多行文本{{msg}}

<script>varapp=newVue({el:"#app",data:{name:"李四",age:24,info:"长江后浪推前浪",sex:'female',like:[],msg:"多行文本"},})</script>

在文本区域插值 (<textarea></textarea>) 并不会生效，应用v-model来代替。

五、选择框

1、单选

<hr>单选<selectv-model="selecte"><optiondisabledvalue="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected:{{selecte}}</span><hr><script>varapp=newVue({el:"#app",data:{name:"李四",age:24,info:"长江后浪推前浪",sex:'female',like:[],msg:"多行文本",selecte:'',selected:[]},})</script>

2、多选

<hr><selectv-model="selected"multiplestyle="width:50px;"><option>A</option><option>B</option><option>C</option></select><br><span>Selected:{{selected}}</span><script>varapp=newVue({el:"#app",data:{name:"李四",age:24,info:"长江后浪推前浪",sex:'female',like:[],msg:"多行文本",selected:[]},})</script>

用v-for渲染的动态选项

<select v-model="selected">
 <option v-for="option in options" v-bind:value="option.value">
  {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
 el: '...',
 data: {
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
})

Vue.js框架 v-model指令

原文地址：http://blog.51cto.com/dreamlinux/2118555

Vue.js框架 v-model指令

.lazy

.number

.trim

知识推荐

`.lazy`

`.number`

`.trim`