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

最新推荐文章于 2024-03-19 16:24:47 发布

原创最新推荐文章于 2024-03-19 16:24:47 发布 · 780 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了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>