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. golang API

    1.server端程序 package main //简单的JSON Restful API演示(服务端) //author: Xiong Chuan Liang //date: 2015-2-28 ...

  2. POJ 3784 Running Median (动态中位数)

    题目链接:http://poj.org/problem?id=3784 题目大意:依次输入n个数,每当输入奇数个数的时候,求出当前序列的中位数(排好序的中位数). 此题可用各种方法求解. 排序二叉树方 ...

  3. 031：verbatim 标签

    verbatim 标签: verbatim 标签:默认在 DTL 模板中是会去解析那些特殊字符的.比如 {% 和 %} 以及 {{ 等.如果你在某个代码片段中不想使用 DTL 的解析引擎.那么你可以把 ...

  4. SpringBoot整合MyBatis-Plus实现快速业务功能开发

    概览:使用MybatisPlus和它的代码生成整合SpringBoot可以实现快速的业务功能开发,具体步骤如下 一.添加依赖 <dependency> <groupId>org ...

  5. python生成HTMl报告（unittest）

      Python3 使用HTMLTestRunner.py 报错ImportError: No module named 'StringIO'处理方法 HTMLTestRunner.py文件是基于Py ...

  6. gawk进阶

    一.使用变量 gawk支持两种不同类型的变量: 内建变量 自定义变量 1.1 内建变量 ①字段和记录分隔符变量 FIELDWIDTHS:有空格分割的一列数字,定义了每个数据字段确切宽度 FS:输入字段 ...

  7. UE4在PSVR中的抗锯齿和优化相关知识

    UE4目前版本(4.15)在PS平台上并不支持MSAA,在未来的版本会加入.也就是说目前没有办法在PS平台上使用Forward Rendering + MSAA的组合 FXAA效率最高,但效果最差,只 ...

  8. ubuntu 配置pptp

    PPTP是点对点隧道协议,用于在公网上建立两个节点之间的专用用网络.普通的用户一般是通过拨号的方式,接入ISP提供的网络,由于国内的上网环境,是访问不了google的,所以必须首先要有一台可以上goo ...

  9. 001-notepad++下载安装、添加右键

    一.下载 1.1.下载地址:https://notepad-plus-plus.org/ 一般下载 /1.2 1.2.解压至指定路径下即可 1.3.注册表添加鼠标右键 添加鼠标右键, 保存成reg执行 ...

  10. Vagrant 手册之 Multi-machine 多机器

    原文地址 Vagrant 可以在一个 Vagrantfile 中定义并控制多个虚拟机.这就是"multi-machine"环境. 这些机器可以协同工作或互相关联.multi-mac ...