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. Java入门第一阶段总结

    前言 写了三周的模拟题,对原本就厌恶的模拟更加深恶痛绝.但是不得不说模拟题是对一门语言入门掌握其语法成效最快的一类题,轻松地从C入门到了Java.一直坚信各门语言都是想通的,一力破万法. 作业过程总结 ...

  2. Tomcat5启动流程与配置详解

    标签:配置 tomcat 休闲 职场 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://zhangjunhd.blog.51cto. ...

  3. mysql 不能对同一个表进行 update(delete) 和 select 联合操作

    eq:     update a set  a.x = 1  where a.y  in (select a.x from  a); 上边语法是错误的,在对aupdate 时不能再条件中对同一个a表进 ...

  4. Git应用详解第八讲：Git标签、别名与Git gc

    前言 前情提要:Git应用详解第七讲:Git refspec与远程分支的重要操作 这一节主要介绍Git标签.别名与Git的垃圾回收机制. 一.Git标签(tag) 1.标签的实质 标签与分支十分相似, ...

  5. 【Java】手动编写第一个Java程序，HelloWorld!

    第一个Java程序HelloWorld! 环境前提:确保你已经配置好了JDK8的环境变量,和本体安装 打开文本编辑器,这里我使用的是EditPlus 编写代码: public class Hello{ ...

  6. 数据结构之栈—强大的四则复杂运算计算器(超过windows自带的科学计算器)【中缀转后缀表达式】

    比windows自带计算器还强的四则复杂运算计算器! 实测随机打出两组复杂算式:-7.5 * 6 / ( -2 + ( -6.5 -  -5.22 ) )与7.5+-3*8/(7+2) windows ...

  7. A - Smith Numbers POJ

    While skimming his phone directory in 1982, Albert Wilansky, a mathematician of Lehigh University,no ...

  8. LCA Nearest Common Ancestors （很典型的例题）

    A rooted tree is a well-known data structure in computer science and engineering. An example is show ...

  9. [书籍精读]《React Native精解与实战》精读笔记分享

    写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...

  10. Python算法题：金字塔

    代码如下: #Python金字塔练习 """ 最大层数:max_level 当前层数:current_level 金字塔正序时: 每层的空格=最大层数-当前层数 每层的星 ...