vue.js使用v-model指令实现的数据双向绑定功能示例


Posted in Javascript onMay 22, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun测试运行效果如下:

vue.js使用v-model指令实现的数据双向绑定功能示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
JS实现分页导航效果
Feb 19 Javascript
详解js类型判断
May 22 #Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 #Javascript
swiper 自动图片无限轮播实现代码
May 21 #Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 #Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
基于Vue的延迟加载插件vue-view-lazy
May 21 #Javascript
jQuery获取随机颜色的实例代码
May 21 #jQuery
You might like
解决File size limit exceeded 错误的方法
2013/06/14 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JS前端笔试题分析
2016/12/19 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python实现复制大量文件功能
2019/08/31 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
营业经理岗位职责
2013/11/10 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
村抢险救灾方案
2014/05/09 职场文书
四风自我剖析材料
2014/09/30 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
党支部季度考核意见
2015/06/02 职场文书
医者仁心观后感
2015/06/17 职场文书
污染环境建议书
2015/09/14 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python