Vue指令之v-model和双向数据绑定

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <h4>{{msg}}</h4>

            <!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->

            <!-- 注意： v-model 只能运用在 表单元素中

            input(radio, text, address, email....)   select

              checkbox   textarea   -->

            <input type="text" v-model="msg" />

            <!-- v-bind只能单向给属性绑定变量,Mode层绑定View层 -->

            <input type="text" v-bind:value="msg" />

        </div>

        <script type="text/javascript">

            new Vue({

                el:"#app",

                data:{

                    msg:"数据双向绑定！"

                }

            })

        </script>

    </body>

</html>

使用v-mode写的一个计算器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="n1">

            <select v-model="opt">

              <option value="+">+</option>

              <option value="-">-</option>

              <option value="*">*</option>

              <option value="/">/</option>

            </select>

            <input type="text" v-model="n2">

            <input type="button" value="=" @click="calc">

            <input type="text" v-model="result">

          </div>

          <script>

            // 创建 Vue 实例，得到 ViewModel

            var vm = new Vue({

              el: '#app',

              data: {

                n1: 0,

                n2: 0,

                result: 0,

                opt: '+'

              },

              methods: {

                calc() { // 计算器算数的方法

                  // 逻辑：

                   switch (this.opt) {

                    case '+':

                      this.result = parseInt(this.n1) + parseInt(this.n2)

                      break;

                    case '-':

                      this.result = parseInt(this.n1) - parseInt(this.n2)

                      break;

                    case '*':

                      this.result = parseInt(this.n1) * parseInt(this.n2)

                      break;

                    case '/':

                      this.result = parseInt(this.n1) / parseInt(this.n2)

                      break;

                  } 

                }

              }

            });

          </script>

    </body>

</html>

学习Vue第四节，v-model和双向数据绑定的更多相关文章

  1. 学习HTML 第四节.插入图像

    学习HTML 第四节.插入图像 全是文字的网页太枯燥了吧,我们来搞个图片上去! <!DOCTYPE html><html><head><meta charse ...

  2. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

  3. Vue: 一个简单的Vue2.0 v-model双向数据绑定的实现，含源代码，小白也能看懂

    首先说一下原理吧 View层(dom元素)的变动如何响应到Model层(Js变量)呢? 通过监听元素的input事件来动态的改变js变量的值,实际上不是改变的js变量的值,而是改变的js变量的gett ...

  4. Vue快速学习_第四节

    获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...

  5. [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...

  6. HTML学习----------DAY2第四节

    HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...

  7. 学习vue第七节，filter过滤器如何的使用

    vue 过滤器如何的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. 学习vue第六节，v-if和v-show

    vue 中的v-if和v-show <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. 学习vue第五节，vue中使用class和style的css样式

    vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...

随机推荐

  1. 外观模式（c++实现）

    外观模式 目录 外观模式 模式定义 模式动机 UML类图 源码实现 优点 缺点 模式定义 外观模式(Facade),为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子 ...

  2. SQL数据类型：nchar，char，varchar，nvarchar 的区别和应用场景

    概括: char:固定长度,存储ANSI字符,不足的补英文半角空格.CHAR存储定长数据很方便,CHAR字段上的索引效率级高,比如定义CHAR(10),那么不论你存储的数据是否达到了10个字节,都要占 ...

  3. webWMS开发过程记录（五）- 详细设计之系统界面框架设计

    界面区域划分 使用frameset分了上中下三个区域 上:显示系统名称和用户信息,以及一些提示信息(需通过Ajax定时更新提示信息),显示高度固定 中:再次使用frameset分成左右区域 左:显示导 ...

  4. 面试问了解Linux内存管理吗？10张图给你安排的明明白白！

    文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 今天来带大家研究一下Linux内存管理.对于精通 CURD 的业务同学 ...

  5. 小白们错过就没了！Python基础之注释&变量命名

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:DZQTesters PS:如有需要Python学习资料的小伙伴可以加 ...

  6. github使用--配置sshkey

    配置sshkey 好处:每次提代码都不要输入用户名和密码. 1.生成key: 输入命令ssh-keygen -t rsa -C "邮箱地址" [邮箱地址:注册github时填写的邮 ...

  7. MySql的数据库方言问题

    在使用hibernate将po(一般对象类)转化为数据库表时,如果mysql的版本为5.0之前的,则方言写为:<property name="dialect">org. ...

  8. blink测试技术介绍

    引言: flink是面向数据流处理和批处理的分布式开源计算框架.2016年阿里巴巴引入flink框架,改造为blink,将其运用到搜索及推荐的离线实时计算中,成功解决了搜索.推荐实时大数据量计算的痛点 ...

  9. 开发者福利！百问I.MX6ULL裸机文档发布

    终于等到你,百问科技近600页的100ask_imx6ull裸机文档发布,已经合并到“嵌入式Linux应用开发完全手册第2版_韦东山全系列视频文档全集.pdf(1222页)”,所有人免费下载学习. 本 ...

  10. java 容器（collection）--ArrayList 常用方法分析 源码分析

    ArrayList 介绍 打开jdk源码看看官方文档的介绍 粗糙的翻译下大致意思是: List接口的可调整大小的数组实现.实现了所有可选的列表操作,并允许所有元素,包括 null .除了实现List接 ...