vue.js使用v-model指令实现的数据双向绑定功能示例
更新时间：2018年05月22日 09:19:35 作者：爱代码也爱生活
这篇文章主要介绍了vue.js使用v-model指令实现的数据双向绑定功能,简单分析了v-model指令的功能并结合实例形式给出了v-model指令实现数据双向绑定相关操作技巧,需要的朋友可以参考下
本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能。分享给大家供大家参考，具体如下：
vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：
v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：
app.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>
vuejs v-model 数据双向绑定
</title>
<style type="text/css">
[v-cloak] { display: none }
</style>
</head>
<body>
<div id="app">
<form>
姓名：
<input type="text" v-model="data.name" placeholder="姓名"/>
<br />
性别：
<input type="radio" id="one" value="One" v-model="data.sex"/>
<label for="man">男</label>
<input type="radio" id="two" value="Two" v-model="data.sex"/>
<label for="male">女</label>
<br />
<input type="checkbox" id="jack" value="book" v-model="data.interest"/>
<label for="jack">阅读</label>
<input type="checkbox" id="john" value="swim" v-model="data.interest"/>
<label for="john">游泳</label>
<input type="checkbox" id="move" value="game" v-model="data.interest"/>
<label for="move">游戏</label>
<input type="checkbox" id="mike" value="song" v-model="data.interest"/>
<label for="mike">唱歌</label>
<br />
身份：
<select v-model="data.identity">
<option value="teacher" selected>教师</option>
<option value="doctor">医生</option>
<option value="lawyer">律师</option>
</select>
</form>
<p><pre>data: {{$data | json 2}}</pre></p>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
new Vue({
el: '#app',
data: {
data:{
name:'',
sex:'',
interest:[],
identity:''
}
}
})
})
</script>
</html>
使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
倒计时的运用场景是需要经常用到的，但是根据业务的不同，好比手机验证码或者是邮箱验证码之类的，即使用户跳转到其它页面或者刷新，再次回到登录也，验证码的倒计时也得保持状态,下面通过本文给大家分享Vue3 验证码倒计时功能实现，感兴趣的朋友一起看看吧2022-08-08
在前端开发中,我们经常需要将Markdown格式的文本渲染成HTML并展示在页面上,同时还希望能够对代码块进行高亮显示,今天我将分享一段代码,通过Vue指令实现了这个功能,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue3中注册全局的组件,并在TS中添加全局组件提示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了解决Vuepress码云部署及自动跳转404的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vuedraggable+element ui实现页面控件拖拽排序效果
这篇文章主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家介绍了vue前端优雅展示后端十万条数据的考点剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue表单验证rules及validator验证器的使用方法实例
在vue开发中,难免遇到各种表单校验,下面这篇文章主要给大家介绍了关于vue表单验证rules及validator验证器使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
CodeMirror提供了强大的代码编辑功能,而Vue.js使得组件的创建和数据绑定变得非常简单,当用户编辑代码时,实时预览会根据代码的变化进行更新,从而为用户提供了一个交互式的编程环境,这篇文章主要介绍了Vue中如何进行代码编辑器与实时预览,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了element 实现导航栏收起展开功能，实现思路先给 el-menu加上 :collapse="isCollapse" 属性，这个属性也是 element 上的一个参数，意思为是否开启折叠动画，在 data 中定义 isCollapse ，用 true 和 false 控制展开与收起，需要的朋友可以参考下2023-01-01
Vue使用antd组件a-form-model实现数据连续添加功能
这篇文章主要介绍了Vue使用antd组件a-form-model实现数据连续添加功能,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
最新评论