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 ...
随机推荐
- mvn 打包排除test
mvn clean package compile -Dmaven.test.skip=true
- Ts 的类
TS 中的公共.私有和受保护的修饰符: 1.public表示公共的,用来指定在创建实例后可以通过实例访问的,也就是类定义的外部可以访问的属性和方法.默认是 public 2.private修饰符表示私 ...
- 为按钮绑定实现js跳转
页面代码 <button type="button" class="btn btn-xs btn-info" id="add" nam ...
- macOS BLAS LAPACK
/System/Library/Frameworks/Accelerate.framework/Frameworks/vecLib.framework/Headers
- 1349 - View's SELECT contains a subquery in the FROM clause
mysql创建视图 报错1349 - View's SELECT contains a subquery in the FROM clause:: 原因创建视图的sql语句中有不支持子查询, 所以需要 ...
- 5G即将到来！我们需要一部怎样的手机呢？
随着5G技术研发试验即将于年底宣告完成,也就意味着2019年起,5G商用将会宣布启动,现在OPPO.vivo.小米.华为.一加等众多手机厂商也宣布启动5G计划,这时5G势必会掀起一股新鲜的血液,5G手 ...
- php strtr()函数 语法
php strtr()函数 语法 作用:转换字符串中的某些字符直线电机生产厂家 语法:strtr(string,from,to)或者strtr(string,array) 参数: 参数 描述 stri ...
- Axios 安卓4.4不兼容的问题
问题:Vue在使用Axios做接口请求时,如果是安卓4.4系统会发生报错,原因是安卓4.4不支持ES6的Promise语法 解决方案: 1.安装: npm install babel-polyfill ...
- 怎么实现web端上传超大文件
1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...
- 【HDOJ6687】Rikka with Stable Marriage（Trie树，贪心）
题意:给定两个长均为n的序列a和b,要求两两配对,a[i]和b[j]配对的值为a[i]^b[j],求配对后的值之和的最大值 n<=1e5,a[i],b[i]<=1e9 思路:和字典序最大的 ...