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. 新特性2-lambda表达式

    最近几天学习了一下lambda表达式,看了不少博客,感觉有一篇博客总结的一句话总结的很好:lambda表达式是一段可以传递的代码,它的核心思想是将面向对象中的传递数据变成传递行为.其实以前也有传递行为 ...

  2. No qualifying bean of type xxx' available 的一种解决方法

    获取bean Class beanClass = Class.forName(event.className); FilterEvent filterEvent = (FilterEvent)Bean ...

  3. gulp自动化构建工具使用总结

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  4. GC、进程和线程的定义

    GC是什么,为什么要有GC GC是垃圾收集的意思(Gabage Collection),内存处理是编程人员容易出现问题的地方,忘记或者错误的内存回收会导致程序或系统的不稳定甚至崩溃.Java提供的GC ...

  5. JMeter-性能测试之报表设定的注意事项

    在使用 Jmeter 执行性能测试时,需要屏蔽以下模块: 结果树 图形结果 断言 具体的说明,可以见官网:http://jmeter.apache.org/usermanual/component_r ...

  6. IO流之RandomAccessFile和File

    通过学习一些经典案例来复习基础 ------------------------------------------------------------------------------------ ...

  7. 配置Android Studio

    1.去gradle官网下载gradle,gradle的版本可以在C:\Program Files\Android\Android Studio\gradle下看到 2.新建一个项目,退出后把下载好的g ...

  8. Centos7网卡绑定的两种方法

    https://blog.51cto.com/youdong/1963416 选择模式4,并且layer选择3+4,交换机要配置LAG 一．传统的bond方式 (1)bond几种主要模式介绍 ü mo ...

  9. Python3解leetcode Count Binary Substrings

    问题描述: Give a string s, count the number of non-empty (contiguous) substrings that have the same numb ...

  10. mui初级入门教程（一）— 小白入手mui的学习路线

    文章来源:小青年原创发布时间:2016-05-15关键词:mui,html5+转载需标注本文原始地址:http://zhaomenghuan.github.io/#!/blog/20160515 写在 ...