VUE v-model表单数据双向绑定完整示例
更新时间：2019年01月21日 08:44:27 作者：黎成诃月
这篇文章主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下
本文实例讲述了VUE v-model表单数据双向绑定。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-model双向绑定</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<textarea v-model = "message" placeholer = '请在此输入文字'></textarea>
<span>{{message}}</span>
</br>
<input type="text" v-model="data.name"/>
<span>姓名：{{data.name}}</span>
</br>
<input type="radio" id="boy" value="男" v-model="data.gender"/>
<label for="boy">男</label>
<input type="radio" id="girl" value="女" v-model="data.gender"/>
<lable for="girl">女</lable>
<span>{{data.gender}}</span>
<br/>
<input type="checkbox" id="item1" value="阅读" v-model="data.interest"/>
<lable for="item1">阅读</lable>
<input type="checkbox" id="item2" value="打球" v-model="data.interest"/>
<lable for="item2">打球</lable>
<input type="checkbox" id="item3" value="体操" v-model="data.interest"/>
<lable for="checkbox">体操</lable>
<br/>
<span>{{data.interest}}</span>
<select v-model="data.identity">
<option value="java" selected>java</option>
<option value="web">web</option>
<option value="hr">hr</option>
</select>
<span>身份：{{data.identity}}</span>
<!--select：用 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>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '6',
data: {
name: '',
gender: '',
interest: [],
identity: ''
},
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
</body>
</html>
这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
Vue利用vue-baidu-map实现获取经纬度和搜索地址
在开发项目的时候，发现需要获取经纬度，由于这个项目是用vue写的，最后决定使用vue-baidu-map来快速获取经纬度，感兴趣的可以了解一下2022-09-09
这篇文章主要介绍了vue实现pdf文件发送到邮箱功能,实现代码包括对邮箱格式内容是否为空的验证方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了JavaScript实现简单的图片切换功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-04-04
这篇文章主要介绍了vuex mutations的两种调用方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要给大家分享一个开发中常见的需求，接下来将为大家详细介绍弹幕的实现以及设计思路一步一步描述出来，希望大家能够喜欢2023-06-06
这篇文章主要介绍了vue父组件异步传递props值,子组件接收不到解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Element树形控件el-tree懒加载并设置默认展开和选中的效果
本文主要介绍了Element树形控件el-tree懒加载并设置默认展开和选中的效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
vue使用$attrs和$listeners多级组件嵌套传递数据
这篇文章主要为大家介绍了vue使用$attrs和$listeners多级组件嵌套传递数据示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
Vite是一个快速的构建工具,Vue3是一个流行的JavaScript框架,下面这篇文章主要给大家介绍了关于vite(vue3)配置内网ip访问的方法步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-05-05
今天小编就为大家分享一篇解决Vue+Element ui开发中碰到的IE问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论