前端笔记九vue的双向数据绑定及实例
Posted 桥本环奈粤港澳分奈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端笔记九vue的双向数据绑定及实例相关的知识，希望对你有一定的参考价值。
vue中的v-bind指令可以实现从model到view的单向绑定，而v-model可以双向绑定数据
一个简单的计算器实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model可以双向绑定数据，而v-bind只能从model到view单项绑定 -->
<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="calculate">
<input type="text" v-model="result"></input>
<!-- 注：v-model只能运用在表单元素上，即input（radio、text、address、email等）、select、checkbox -->
</div>
<script>
//创建Vue实例，得到ViewModel
var vm = new Vue({
el: "#app",
data: {
n1: 0,
n2: 0,
opt: "+",
result: 0
},
methods: {
calculate() {
codestr = "parseInt(this.n1)" + this.opt + "parseInt(this.n2)"
this.result = eval(codestr)
}
}
});
</script>
</body>
</html>
如下所示，运用v-model之后，在界面中更改n1、n2、还有操作符opt的值，会自动更改vue中对应的data，点击=计算data中的result后，界面中的resule也会自动
注：v-model只能运用在表单元素上，即input（radio、text、address、email等）、select、checkbox
参考：
以上是关于前端笔记九vue的双向数据绑定及实例的主要内容，如果未能解决你的问题，请参考以下文章