vue.js（6）--v-model
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的更多相关文章
- Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）
前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...
- Vue.js（25）之 vue全局配置api介绍
本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue.js（1）--创建vue实例的基本结构
vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...
- 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Web - 前端 Vue.js （1）
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- 从零开始学 Web 之 Vue.js（六）Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue.js（一）
之前看过一点vue.js但是知识点没做记录,现在也差不多不记得了,今天把以前看过的翻一遍,顺便提炼一下知识点 注意:下面的所有与vue相关的标签.指令都是写在id="app"的di ...
- vue.js（5）--事件修饰符
vue中的事件修饰符(.stop..prevent..self..capture..once) (1)实例代码 <!DOCTYPE html> <html lang="en ...
随机推荐
- CF527E Data Center Drama
链接CF527E Data Center Drama 题目大意:给你一个无向图,要求加最少的边,然后给这些无向图的边定向,使得每一个点的出入度都是偶数. \(n<=10^5,n\leq 2*10 ...
- LOJ6300 BZOJ5283 [CodePlus 2018 3 月赛]博弈论与概率统计
一道好题!很久以前就想做了,咕到了现在,讲第二遍了才做. 首先我们观察到$p$是没有用的 因为赢的次数一定 那么每一种合法序列出现的概率均为$p^n*(1-p)^m$ 是均等的 我们可以不看它了 然后 ...
- 图片公式转为word格式
mathpix提取Latex格式,下载mathpix snipping tool工具,截图即可获取Latex格式公式 Latex格式去下面网站转换为mathml格式 https://johnmacfa ...
- Python PEP8代码书写规范
摘自: 规范 https://blog.csdn.net/ratsniper/article/details/78954852
- 微信公众号号开发（Java）
参考:http://www.cnblogs.com/fengzheng/p/5023678.html http://www.cnblogs.com/xdp-gacl/p/5151857.html 一: ...
- div页面布局基本布局知识
页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue子组件获取父组件的数据
- 面向对象编程思想（OOP）（转发）
本文我将从面向对象编程思想是如何解决软件开发中各种疑难问题的角度,来讲述我们面向对象编程思想的理解,梳理面向对象四大基本特性.七大设计原则和23种设计模式之间的关系. 软件开发中疑难问题: 软件复杂庞 ...
- php面试专题---16、MySQL创建高性能索引考点
php面试专题---16.MySQL创建高性能索引考点 一.总结 一句话总结: 注意:只写精品 1.索引的基础? 类似书籍的目录:索引类似于书籍的目录,要想找到一本书的某个特定主题,需要先查找书的目录 ...
- Js DOM 修改 css Style
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...