vue自学笔记-v-model指令学习（四）
程序员文章站
2022-05-16 14:06:50
...
v-model实现了数据和表单标签的双向绑定。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="text" name="" id="" v-bind:value="msg" style="width: 600px;"/>
<input type="text" name="" id="" v-model="msg" style="width: 600px;"/>
</div>
<script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
msg: '我是好学生，爱学习，爱敲代码。么么哒'
},
methods:{
}
})
</script>
</body>
</html>
通过v-model的双向数据实现简易计算器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="num1"/>
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="num2"/>
<button type="button" @click="cal">=</button>
<input type="text" v-model="sum"/>
</div>
<script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
num1: 0,
num2: 0,
opt: '+',
sum: 0
},
methods:{
cal(){
switch(this.opt){
case '+':
this.sum = parseInt(this.num1) + parseInt(this.num2);
break;
case '-':
this.sum = parseInt(this.num1) - parseInt(this.num2);
break;
case '*':
this.sum = parseInt(this.num1) * parseInt(this.num2);
break;
case '/':
this.sum = parseInt(this.num1) / parseInt(this.num2);
break;
}
}
}
})
</script>
</body>
</html>
上一篇： vue自学笔记-v-for指令学习（五）
下一篇： OpenCV读写视频文件