vue实现的双向数据绑定操作示例


Posted in Javascript onDecember 04, 2018

本文实例讲述了vue实现的双向数据绑定操作。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>经典的双向数据绑定</title>
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
 </head>
 <body>
 <div id="container">
  <button @click="modifyMsg">修改msg</button>
<!-- 方向1:将定义好的数据绑定到试图 
实现方式:双花括号 
常见指令:v-for v-if v-show …… -->
<!-- 方向2:将视图中用户操作的结果 绑定到指定的数据  (多数指表单控件 input/textarea/select)
  实现方式: v-model
-->
    <p>{{msg}}</p>
    <input type="text" v-model="userAddress">
    <p>{{"用户修改的数据:"+userAddress}}</p>
    <hr>
    <h2>v-model.number</h2>
    <input type="text" v-model.number="n">
    <br>
    <input type="text" v-model.number="m">
    <br>
    <button @click="getNum">求和</button>
    <span>{{num}}</span>
    <hr>
    <h2>v-model.trim</h2>
    <h5>没有过滤首尾空格时:</h5>
    <input type="text" v-model="myInput">
    <span>{{myInput.length}}</span>
    <h5>过滤首尾空格时:</h5>
    <input type="text" v-model.trim="myInput">
    <span>{{myInput.length}}</span>
    <h2>v-moddel.lazy</h2>
    <h5>input失去焦点时才会输出myMsg</h5>
    <input type="text" v-model.lazy="myMsg">
    <span>{{myMsg}}</span>
  </div>
  <script>
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs",
        userAddress:"",
        n:0,
        m:0,
        num:0,
        myInput:0,
        myMsg:""
      },
      methods:{
        modifyMsg:function(){
          this.msg = "Hello Model"
        },
        getNum:function(){
          this.num = this.n+this.m;
        }
      }
    })
  </script>
 </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下运行效果

vue实现的双向数据绑定操作示例

感兴趣的朋友可以测试一下看看运行效果。

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

Javascript 相关文章推荐
$()JS小技巧
Jul 21 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
vue实现的组件兄弟间通信功能示例
Dec 04 #Javascript
微信小程序模板template简单用法示例
Dec 04 #Javascript
vue项目刷新当前页面的三种方法
Dec 04 #Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 #Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 #Javascript
You might like
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
两种php实现图片上传的方法
2016/01/22 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
python三元运算符实现方法
2013/12/17 Python
python妹子图简单爬虫实例
2015/07/07 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python组合无重复三位数的实例
2018/11/13 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
现金会计岗位职责
2013/12/05 职场文书
大学生个人事迹材料
2014/01/21 职场文书
高二生物教学反思
2014/01/27 职场文书
八项规定整改方案
2014/10/01 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
骨干教师申报材料
2014/12/17 职场文书
二年级学生期末评语
2014/12/26 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
三孔导游词
2015/02/05 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers
keepalived + nginx 实现高可用方案
2022/12/24 Servers