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

Vue教程04(v-model指令介绍)

2019-07-08 19:18 656 查看

通过前面的介绍我们已经了解了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>

效果如下:

因为实现比较简单，就不过多赘述了~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航