Vue中v-model的使用示例详解
一，v-model是什么
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
二，为什么使用v-model
v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。
三，v-model的原理简单描述
v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。
四，用途
用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据。
简单使用
v-model与input输入框的搭配使用：
<div id="app">
<input type="text" v-model="message" placeholder="输入...."/>
<p>输入的内容是：{{message}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>注意
使用v-model后：
1.表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性
2.对于在之间插入的值，也不会生效
3.使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以使用@input代替v-model
用法：
<div id="app">
<textarea @input="handleInput" placeholder="输入..."></textarea>
<p>输入的内容是：</p>
<p style="white-space: pre;">{{text}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
text:''
},
methods:{
handleInput:function(e){
this.text = e.target.value;
}
}
})
</script>单选按钮上使用
单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选。
例：
<div id="app">
<input type="radio" :checked="picked"/>
<label>单选按钮</label>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
picked:true
}
})
</script>如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用。
例：
<div id="app">
<input type="radio" v-model="picked" id="badminton" value="羽毛球" />
<label for="badminton">羽毛球</label>
<br/>
<input type="radio" v-model="picked" id="basketball" value="篮球" />
<label for="basketball">篮球</label>
<br/>
<input type="radio" v-model="picked" id="football" value="足球" />
<label for="football">足球</label>
<br/>
<p>选择的项是：{{picked}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
picked:"篮球"
}
})
</script>数据的picked值与单选按钮的value值一致时，就会选中该项。
复选框上使用
复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，是用v-model来绑定一个布尔值。
例：
在勾选时，数据checked的值变为了true，label中渲染的内容也会更新。
<div id="app">
<input type="checkbox" v-model="checked" id="checked"/>
<label for="checked">选择状态：{{checked}}</label>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
checked:false
}
})
</script>组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。
例：
<div id="app">
<input type="checkbox" v-model="checked" id="badminton" value="羽毛球" />
<label for="badminton">羽毛球</label>
<br/>
<input type="checkbox" v-model="checked" id="basketball" value="篮球" />
<label for="basketball">篮球</label>
<br/>
<input type="checkbox" v-model="checked" id="football" value="足球" />
<label for="football">足球</label>
<br/>
<p>选择的项是：{{checked}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
checked:['羽毛球', '篮球']
}
})
</script>选择列表上使用
选择列表就是下拉选择器，也就是常见的表单控件，同样也分为单选和多选两种。
单选例：
**备注：**option是备选项，如果含有value属性，v-model会优先匹配value值；如果没有，就会直接匹配option的text，比如选中第一项时，selected的值是badminton，而不是羽毛球，但选中第二项时，由于没有value属性，selected的值就是篮球。
<div id="app">
<select v-model="selected">
<option value ="badminton">羽毛球</option>
<option>篮球</option>
<option>足球</option>
</select>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
selected:'篮球'
}
})
</script>多选例：
**备注：**给添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似。
<div id="app">
<select v-model="selected" <multiple></multiple>>
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
selected:'basketball',
options:[
{text:'篮球', value:'basketball'},
{text:'羽毛球', value:'badminton'},
{text:'足球', value:'football'}
]
}
})
</script>注：虽然用选择列表可以很简单地完成下拉选择的需求，但在实际业务中由于样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，比如不支持搜索，故并不常用。常见的解决方案是用div模拟一个类似的控件。
修饰符
与事件修饰符类似，v-model也有修饰符，用于控制数据同步的时机。
.lazy
在输入框中，v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入 法情况外)，使用修饰符.lazy会转变为在change事件中同步，示例代码如下：
<div id="app">
<input type="text" v-model.lazy="message"/>
<p>{{message}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>这时，message并不是实时改变的，而是在失焦或按回车时才更新。
.number
使用修饰符.number可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型其实是String，比如在数字输入框时会比较有用，示例代码如下：
<div id="app">
<input type="number" v-model.number="message"/>
<p>{{message}}</p>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>.trim
修饰符.trim可以自动过滤输入的首尾空格，示例代码如下：
到此这篇关于Vue中v-model的使用示例详解的文章就介绍到这了,更多相关Vue v-model使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
这篇文章主要介绍了vue 动态组件(component :is) 和 dom元素限制(is)用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以使用一套代码同时构建iOS、Android和Web应用,这篇文章主要给大家介绍了关于如何使用vue3+uni-app封装音乐播放插件的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue使用jsonp抓取qq音乐数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue-cli项目中使用Mockjs详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Mock.js在Vue项目中的使用,在vue.config.js中配置devServer，在before属性中引入接口路由函数，详细步骤跟随小编通过本文学习吧2022-07-07
这篇文章主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
解决element-ui的el-dialog组件中调用ref无效的问题
这篇文章主要介绍了解决element-ui的el-dialog组件中调用ref无效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
Vue/React子组件实例暴露方法(TypeScript)
最近几个月都在用TS开发各种项目，框架有涉及到Vue3,React18等，记录一下Vue/React组件暴露出变量/函数的方法的写法，对vue react组件暴露方法相关知识感兴趣的朋友跟随小编一起看看吧2022-11-11
这篇文章主要介绍了vue3+Echarts页面加载不渲染显示空白页面的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue输入框组件开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论