v-model实现数据的双向绑定（简易计算器实例）

简易计算器实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>简易计算器</title>

    <script src="../lib/vue.js"></script>

</head>

<body>

    <div class="app">

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

        <select name="" id="" v-model="symbol">

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

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

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

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

        </select>

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

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

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

    </div>

    <!-- 简易计算器基本html结构 -->

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                firstNum:'',

                secondNum:'',

                finallyNum:'',

                symbol:'+'  //v-model双向数据绑定初始化值

            },

            methods:{

                count(){

                    if(this.symbol=='+'){

                        this.finallyNum=parseInt(this.firstNum)+parseInt(this.secondNum);

                    }

                    if(this.symbol=='*'){

                        this.finallyNum=parseInt(this.firstNum)*parseInt(this.secondNum);

                    }

                    if(this.symbol=='-'){

                        this.finallyNum=parseInt(this.firstNum)-parseInt(this.secondNum);

                    }

                    if(this.symbol=='/'){

                        this.finallyNum=parseInt(this.firstNum)/parseInt(this.secondNum);

                    }

                }  //定义计算方法

            }

        })

    </script>

</body>

</html>

vue.js（6）--v-model的更多相关文章

  1. Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  2. Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）

    前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...

  3. Vue.js（25）之 vue全局配置api介绍

    本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com ...

  4. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. vue.js（1）--创建vue实例的基本结构

    vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Web - 前端 Vue.js （1）

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  8. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. vue.js（一）

    之前看过一点vue.js但是知识点没做记录,现在也差不多不记得了,今天把以前看过的翻一遍,顺便提炼一下知识点 注意:下面的所有与vue相关的标签.指令都是写在id="app"的di ...

  10. vue.js（5）--事件修饰符

    vue中的事件修饰符(.stop..prevent..self..capture..once) (1)实例代码 <!DOCTYPE html> <html lang="en ...

随机推荐

  1. JS合并两个函数

    /** * 合并两个函数 * @param functionA 先执行 * @param functionB 执行完 functionA 后返回 * @returns {*} */ function ...

  2. less：匹配模式

    相当于JS中的if(不完全是),满足条件后才能匹配 .margin(top, @width: 5px) { margin: @width 0 0 0; } .margin(right, @width: ...

  3. [python 学习] 编码

    一.源文件编码(encoding: utf-8) 1. python 2.x 默认按ascii编码读取源文件,源码中出现了ascii不能表示的字符 "的",所以报错(3.x版本不报 ...

  4. jmeter post请求在终端传参，并且指定请求参数文件

    命令:jmeter -n -t   jmeter_1.jmx   -l   report/report30.jtl    -Jnum=3000 -e -o   webresult/3000result ...

  5. hadoop中的一些术语介绍

    1．MR作业是客户端执行的一个工作单元:包括输入数据,MR的程序和配置信息． Hadoop将作业分成若干个任务task来执行,分为两种任务:map和reduce任务．这些任务运行在集群的节点上,并通过 ...

  6. 载]mysqlhotcopy 热备工具体验与总结

    载]mysqlhotcopy 热备工具体验与总结 今天有空尝试了一下MYSQLHOTCOPY这个快速热备MYISAM引擎的工具.(本文是针对单个服务器的情况,以后将会加入多服务器相关操作)他和MYSQ ...

  7. random模块 os模块

    # random# import random# random.random() # 大于0且小于1之间的小数# random.randint() # 大于等于1且小于等于3之间的整数# random ...

  8. Django中ifequal 和ifnotequal的使用

    Django中{% ifequal A B %} 用来比较A和B两个值是否相等,{% ifnotequal A B %}` 用来比较A和B两个值是否不相等..如: {% ifequal user cu ...

  9. javascrip的数组扁平化

    扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组. 举个例子,假设有个名为 flatten 的函数可以做到数组扁平化,效果就会如下: var ar ...

  10. NoSQL数据库的分布式算法详解

    系统的可扩展性是推动NoSQL运动发展的的主要理由,包含了分布式系统协调,故障转移,资源管理和许多其他特性.这么讲使得NoSQL听起来像是一个大筐,什么都能塞进去.尽管NoSQL运动并没有给分布式数据 ...