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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python下载微信公众号相关文章
2019/02/26 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python面向对象实现方法总结
2020/08/12 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
《桃花心木》教学反思
2014/02/17 职场文书
元旦获奖感言
2014/03/08 职场文书
科学发展观活动总结
2014/08/28 职场文书
月考总结与反思
2015/10/22 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
MySQL查询日期时间
2022/05/15 MySQL