学习vue.js表单控件绑定操作

更新时间：2016年12月05日 09:18:15 作者：1owrie

这篇文章主要和大家一起学习vue.js表单控件绑定操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue.js表单控件绑定的具体代码，供大家参考，具体内容如下

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件绑定</title>
</head>
<body>
<!-- v-model在表单控件元素上实现数据的双向绑定 -->
<div id="app-1">
<input type="text" v-model="message" placeholder="请输入">
<p>{{message}}</p>
</div>

<!-- 单个勾选框 -->
<div id="app-2">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<!-- 多个勾选框绑定到同一数组 -->
<div id="app-3">
<input type="checkbox" id="checkboxjack" v-model="checkedNames" value="Jack">
<label for="checkboxjack">Jack</label>
<input type="checkbox" id="checkboxJohn" v-model="checkedNames" value="John">
<label for="checkboxJohn">John</label>
<input type="checkbox" id="checkboxMike" v-model="checkedNames" value="Mike">
<label for="checkboxMike">Mike</label>
<span>我是{{checkedNames}}</span>
</div>

<!-- 单选框 -->
<div id="app-4">
<input type="radio" id="man" value="man" v-model="sex">
<label for="man">man</label>
<input type="radio" id="woman" value="woman" v-model="sex">
<label for="woman">woman</label>
<span>选择的时是{{sex}}</span>
</div>

<!-- 单选列表 -->
<div id="app-5">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>我是{{selected}}</span>
</div>

<!-- 多选列表 绑定到数组-->
<div id="app-6">
<select v-model='selected' multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>我选择了{{selected}}</span>
</div>

<!-- 动态选项用v-for渲染 通过v-bind绑定value-->
<div id="app-7">
<select v-model='selected'>
<option v-for="item in items" v-bind:value="item.value">
{{item.text}}
</option>
</select>
<!-- v-model后的selected必须出现在data中 -->
<span>选择的是{{selected}}</span>
</div>

<!-- 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： -->

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

<!-- 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值： -->
<input v-model.number="age" type="number">
<!-- 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。.trim如果要自动过滤用户输入的首尾空格，可以添加.trim 修饰符到 v-model 上过滤输入： -->
<input v-model.trim="msg">

 

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>

</body>
</html>

js:

var app1=new Vue({
el:'#app-1',
data:{
message:'开始'
}
});
var app2=new Vue({
el:'#app-2',
data:{
checked:false
}
});
var app3=new Vue({
el:'#app-3',
data:{
checkedNames:[]
}
});
var app4=new Vue({
el:'#app-4',
data:{
sex:''
}
});
var app5=new Vue({
el:'#app-5',
data:{
selected:''
}
});
var app6=new Vue({
el:'#app-6',
data:{
selected:[]
}
});
var app7=new Vue({
el:'#app-7',
data:{
selected: 'A',
items:[
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3实战学习配置使用vue router路由步骤示例
这篇文章主要为大家介绍了Vue3实战学习配置使用vue router路由步骤示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
一文带你了解Vue数组的变异方法
Vue框架提供了一些便捷的数组变异方法，包括push、pop、shift、unshift、splice、sort和reverse等，Vue的数组变异方法可以自动触发DOM更新，本文就详细带大家了解一下Vue.js数组的变异方法
2023-06-06
Vue概念及常见命令介绍(1)
这篇文章主要为大家详细介绍了Vue概念及常见命令，介绍了vue.js声明式渲染、双向绑定及常用指令,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Vue项目页面跳转时浏览器窗口上方显示进度条功能
这篇文章主要介绍了Vue项目页面跳转时浏览器窗口上方显示进度条功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
Vue实现红包雨小游戏的示例代码
红包也叫压岁钱，是过农历春节时长辈给小孩儿用红纸包裹的礼金。本文将通过Vue制作一个红包雨小游戏，文中的示例代码讲解详细，需要的可以参考一下
2022-01-01
vue自定义指令之面板拖拽的实现
这篇文章主要介绍了vue自定义指令之面板拖拽的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue.js数据绑定的方法（单向、双向和一次性绑定）
本篇文章主要介绍了vue.js数据绑定的方法（单向、双向和一次性绑定），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
详解vue服务端渲染(SSR)初探
本篇文章主要介绍了详解vue服务端渲染(SSR)初探，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue3锚点定位两种实现方式示例
这篇文章主要给大家介绍了关于vue3锚点定位两种实现的相关资料,说到锚点定位,很多人第一时间会想到 a标签,但是a标签实现的锚点定位并不是那么的完美,需要的朋友可以参考下
2023-07-07
Vue选项之propsData传递数据方式
这篇文章主要介绍了Vue选项之propsData传递数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10