Vue教程04(v-model指令介绍)
通过前面的介绍我们已经了解了Vue中的基本指令，比如v-cloak,v-text,v-html,v-bind,v-on等指令的作用，以及介绍了MVVM的模式，那么怎么实现动态的在M和V之间数据传递呢，本文我们就来介绍下v-model这个非常有用的指令
v-model指令介绍
v-bind指令的使用
前面的文章中我们已经介绍过了v-bind指令，该指令可以获取vue对象中的数据，但是这个指令只能实现 M 到V的数据传递，反过来实现不了，如下:
<!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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
信息:<input type="text" name="" v-bind:value="msg" style="width: 200px">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"波波烤鸭，加油鸭..."
},
methods:{
}
})
</script>
</body>
</html>演示M修改数据后，V的数据会同步修改:
在这里插入图片描述
但是V的数据修改后M的数据并不会修改
在这里插入图片描述
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>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
信息:<input type="text" name="" v-model:value="msg" style="width: 200px">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"波波烤鸭，加油鸭..."
},
methods:{
}
})
</script>
</body>
</html>
在这里插入图片描述
通过上面的图片可以看出数据是双向的在V和M间同步的
简易计算器实现
利用我们讲的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>Document</title>
<script src="./lib/vue-2.4.0.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>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() { // 计算器算数的方法
// 逻辑：
/* switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
} */
// 注意：这是投机取巧的方式，正式开发中，尽量少用
var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
this.result = eval(codeStr)
}
}
});
</script>
</body>
</html>效果如下:
在这里插入图片描述
因为实现比较简单，就不过多赘述了~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年07月08日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录