Vue007_ 表单输入绑定

表单输入绑定

使用 v-model 对表单数据自动收集

1) text/textarea
2) checkbox
3) radio
4) select

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><form @submit.prevent="handleSubmit"><span>用户名：</span><input type="text" v-model="user.username" /><br /><span>密码：</span><input type="password" v-model="user.pwd" /><br /><span>性别：</span><input type="radio" id="female" value="female" v-model="user.sex" /><label for="female">女</label><input type="radio" id="male" value="male" v-model="user.sex" /><label for="male">男</label><br /><span>爱好: </span><input type="checkbox" id="basket" value="basketball" v-model="user.likes"><label for="basket">篮球</label><input type="checkbox" id="foot" value="football" v-model="user.likes"><label for="foot">足球</label><input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes"><label for="pingpang">乒乓</label><span>城市：</span><select v-model="user.cityId"><option value="">未选择</option><!-- :value -> Text containing the value of the element. --><option v-for="city in allcitys" :value="city.id" >{{ city.name }}</option></select><br /><span>介绍：</span><textarea v-model="user.desc" rows="10"></textarea><br /><br /><input type="submit" value="注册" /></form></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({//提供一个在页面上已存在的 DOM 元素作为 Vue //实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 el: '#demo',data: {user: {username: '',pwd: '',sex: 'female',likes: [],cityId: '',desc: '',},allcitys: [{id: 1,name: 'BJ'},{id: 2,name: 'SH'},{id: 4,name: 'ZZ'}],},methods:{handleSubmit(event){//stringify函数以JSON格式返回表示ECMAScript值的字符串。//类似于我们JAVA中的Object.toString()alert(JSON.stringify(this.user))}}})</script></body>
</html>

结果展示：

Vue007_ 表单输入绑定相关推荐

Vue表单输入绑定（文本框和复选框）
文本框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
Vue表单输入绑定(元婴中期)
表单输入绑定基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自 ...
uniapp 输入法画面_表单输入绑定 · uni-app跨平台移动应用开发 · 看云
# 表单输入绑定 ## [基础用法](https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 &qu ...
Vue.js 表单输入绑定
基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
9.Vue 表单输入绑定
基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
Vue学习笔记(六) 表单输入绑定
v-model 指令在表单元素上创建双向数据绑定,它负责用于监听用户输入事件以更新数据注意,v-model 会忽略所有表单元素特性的初始值,而总是将 Vue 实例的数据作为数据来源 1.输入框 &l ...
Vue基础-09-表单输入绑定
Vue基础-09-表单输入绑定 Vue中想要操作表单的数据,无需再dom操作.比如登录.注册.添加 Vue中提供了一个指令v-model,可以表单的双向数据绑定双向绑定表单原始上面通过v-mode ...
02.Vue3 基础语法：常用语法、列表渲染、事件绑定和表单双向绑定
Vue3 基础语法 1. Vue 中应用和组件的基础概念 createApp createApp 表示创建一个 Vue 应用,存储在 app 变量中. 传入的参数表示,这个应用最外层的组件,应该如何展 ...
react表单双向绑定处理
react中处理表单双向绑定的方法: constructor() {super()this.state = {commentData: [{name: '冯昕',text: '说自己是大帅哥',id: ...

Vue007_ 表单输入绑定

表单输入绑定

使用 v-model 对表单数据自动收集

结果展示：

Vue007_ 表单输入绑定相关推荐

最新文章

热门文章