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 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
vue实现购物车的监听
2020/04/20 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python flask安装和命令详解
2019/04/02 Python
python图形用户接口实例详解
2019/12/16 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
青安岗事迹材料
2014/05/14 职场文书
学校消防安全责任书
2014/07/23 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers