一、v-model双向数据绑定

方法

v-bind - 单向数据绑定（从M到V）
v-model - 双向数据绑定

例子

<input type="text" v-bind:value="msg" style="width:200px">//单向
<input type="text" v-model="msg" style="width:200px">//双向

TIPS

使用v-model指令可以实现表单元素和model中数据的双向绑定，但是v-model只能使用在表单元素中。

二、一个简单的整数计算器

用到的方法

switch(){} - 选择
eval() - 解析字符串

例子

switch(this.opt){case '+':this.t3 = parseInt(this.t1) + parseInt(this.t2);break;case '-':this.t3 = parseInt(this.t1) - parseInt(this.t2);break;case '*':this.t3 = parseInt(this.t1) * parseInt(this.t2);break;case '/':this.t3 = parseInt(this.t1) / parseInt(this.t2);break;
}//switch选择

var codeStr = 'parseInt(this.t1)' + this.opt + 'parseInt(this.t2)'
this.t3 = eval(codeStr)//解析字符串并运算

TIPS

实现运算用到了两种方法eval方法是解析字符串并运算，不推荐使用。

总代码

<!doctype html><head><title>vue v-model双向数据绑定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app1" class=""><h4>{{msg}}</h4><p>尝试在两个文本框中输入</p><input type="text" v-bind:value="msg" style="width:200px"> <input type="text" v-model="msg" style="width:200px"> <!-- 使用v-model指令可以实现表单元素和model中数据的双向绑定，但是v-model只能使用在表单元素中 --></div><hr><p>整数计算器</p><div id="app2" class=""><input type="text" v-model="t1"><select v-model="opt"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="t2"><input type="button" value="=" @click="calc" style="width:30px;"><input type="text" v-model="t3"></div><script type="text/javascript">var vm = new Vue({el: '#app1',data: {msg: 'Hello Vue!'},methods: {}})var vm2 = new Vue({el: '#app2',data: {t1: 0,t2: 0,t3: 0,opt: '+'},methods: {calc(){switch(this.opt){case '+':this.t3 = parseInt(this.t1) + parseInt(this.t2);break;case '-':this.t3 = parseInt(this.t1) - parseInt(this.t2);break;case '*':this.t3 = parseInt(this.t1) * parseInt(this.t2);break;case '/':this.t3 = parseInt(this.t1) / parseInt(this.t2);break;}//解析字符串并运算，不推荐使用//var codeStr = 'parseInt(this.t1)' + this.opt + 'parseInt(this.t2)'//this.t3 = eval(codeStr)}}})</script></body>
</html>

Vue v-model双向数据绑定和一个简单的整数计算器相关推荐

关于datetimepicker和vue v-model指令双向数据绑定失败的问题
关于datetimepicker和vue v-model指令双向数据绑定失败的问题 1,v-model监听用户输入事件以更新数据,并特别处理一些极端的例子.这是v-model指令的解释. 2,解决方案 ...
Vue + editor.Md 双向数据绑定Markdown编辑器（vue-editormd-wrap）
Vue + editor.Md 双向数据绑定组件(vue-editormd-wrap) 先贴上组件的npm主页和源码,如果有下载了开发过程中build版本的用户,将无法使用,请更新为最新版就可以正常使 ...
vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面文章目录 vue使用组件化思想实现一个简单的购物车页面页面预览项目结构组件介绍主页面ShopCar Header组件 Goods组件 Count组 ...
【AcWing 243. 一个简单的整数问题2】
例题:[AcWing 243. 一个简单的整数问题2] 线段树模板题,区间修改区间求和. 题解: 将序列分成N/B块,维护: id[i] = i/B,i所在块标号 res[id] = 第id块的sum ...
php实现一个简单的四则运算计算器
php实现一个简单的四则运算计算器(还不支持括号的优先级).利用栈这种数据结构来计算表达式很赞. 这里可以使用栈的结构,由于php的数组"天然"就有栈的特性,这里直接就利用了数组. ...
swift for循环_Swift | 实战一个简单的素数计算器demo
Swift 实战一个简单的素数计算器demo 本期我们来介绍如何用storyboard来实现一个素数计算器demo,storyboard可以明确地知道界面上的组件与代码的关系,而且比起仅用代码写要方便 ...
作业1开发一个简单的python计算器
开发一个简单的python计算器实现加减乘除及拓号优先级解析用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...
设计一个简单的四则计算器
c# using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; u ...
程序员成长之旅——Delphi实现一个简单的科学计算器
程序员成长之旅--Delphi实现一个简单的科学计算器目标效果组件以及开发环境最终呈现源码GITHUB 目标效果组件以及开发环境 delphi7版本及以上,这里我用delphi10.4进行的 ...

Vue v-model双向数据绑定和一个简单的整数计算器

一、v-model双向数据绑定

方法

例子

TIPS

二、一个简单的整数计算器

用到的方法

例子

TIPS

总代码

Vue v-model双向数据绑定和一个简单的整数计算器相关推荐

最新文章

热门文章