您的位置:首页 > Web前端 > Vue.js

【Vue】v-bind & v-model指令的使用(实现计算器效果)

2020-08-26 19:03 489 查看

Vue学习笔记(一)中,我们已经了解了Vue中的基本指令,比如 v-text,v-html,v-bind,v-on 等指令的使用,并且介绍了 MVVM 模式,那么怎么实现动态的在M和V之间数据传递呢?本文我们就来介绍下 v-model 这个非常有用的指令。

v-bind指令

v-bind 可以获取vue对象中的数据,但是这个指令只能实现 M 到 V 的数据传递,反过来实现不了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
信息:<input type="text" v-bind:value="msg" style="width: 200px">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello world"
},
methods:{

}
})
</script>
</body>
</html>

如下图,M修改数据后,V的数据会同步修改,但是V的数据修改后M的数据并不会改变。

v-model指令

v-model 指令可以实现 M和V 双向的数据传递。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
信息:<input type="text" v-model:value="msg" style="width: 200px">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello world"
},
methods:{

}
})
</script>
</body>
</html>

如下图,M修改数据后,V的数据会同步修改,并且V的数据修改后M的数据也会同步改变。

简易计算器的实现

利用我们学到的v-model指令来实现一个简单的计算器效果。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1:'',
n2:'',
result:'',
opt: '+'
},
methods: {
calc() {
var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
//eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
this.result = eval(codeStr)
}
}
});
</script>
</body>
</html>

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: