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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 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应用提速面面观
2006/10/09 PHP
drupal 代码实现URL重写
2011/05/04 PHP
php表单处理操作
2017/11/16 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python flask框架post接口调用示例
2019/07/03 Python
Numpy的简单用法小结
2019/08/28 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
python中类与对象之间的关系详解
2020/12/16 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
什么是规则表达式
2012/05/03 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
消防安全责任书
2014/04/14 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
组工干部演讲稿
2014/09/02 职场文书
后备干部推荐材料
2014/12/24 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
2016年情人节广告语
2016/01/28 职场文书