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

本文详细介绍了Vue中的v-model双向数据绑定,包括其工作原理和使用示例,特别强调了v-model适用于表单元素的特性。此外,还展示了如何创建一个简单的整数计算器,讲解了用到的switch语句和eval函数,尽管eval函数存在安全风险,不建议在生产环境中广泛使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值