一、v-model双向数据绑定
方法
- v-bind - 单向数据绑定(从M到V)
- v-model - 双向数据绑定
例子
<input type="text" v-bind:value="msg" style="width:200px">//单向
<input type="text" v-model="msg" style="width:200px">//双向
TIPS
使用v-model指令可以实现表单元素和model中数据的双向绑定,但是v-model只能使用在表单元素中。
二、一个简单的整数计算器
用到的方法
- switch(){} - 选择
- eval() - 解析字符串
例子
switch(this.opt){
case '+':
this.t3 = parseInt(this.t1) + parseInt(this.t2);
break;
case '-':
this.t3 = parseInt(this.t1) - parseInt(this.t2);
break;
case '*':
this.t3 = parseInt(this.t1) * parseInt(this.t2);
break;
case '/':
this.t3 = parseInt(this.t1) / parseInt(this.t2);
break;
}//switch选择
var codeStr = 'parseInt(this.t1)' + this.opt + 'parseInt(this.t2)'
this.t3 = eval(codeStr)//解析字符串并运算
TIPS
实现运算用到了两种方法eval方法是解析字符串并运算,不推荐使用。
总代码
<!doctype html>
<head>
<title>vue v-model双向数据绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1" class="">
<h4>{{msg}}</h4>
<p>尝试在两个文本框中输入</p>
<input type="text" v-bind:value="msg" style="width:200px">
<input type="text" v-model="msg" style="width:200px">
<!-- 使用v-model指令可以实现表单元素和model中数据的双向绑定,但是v-model只能使用在表单元素中 -->
</div>
<hr>
<p>整数计算器</p>
<div id="app2" class="">
<input type="text" v-model="t1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="t2">
<input type="button" value="=" @click="calc" style="width:30px;">
<input type="text" v-model="t3">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app1',
data: {
msg: 'Hello Vue!'
},
methods: {
}
})
var vm2 = new Vue({
el: '#app2',
data: {
t1: 0,
t2: 0,
t3: 0,
opt: '+'
},
methods: {
calc(){
switch(this.opt){
case '+':
this.t3 = parseInt(this.t1) + parseInt(this.t2);
break;
case '-':
this.t3 = parseInt(this.t1) - parseInt(this.t2);
break;
case '*':
this.t3 = parseInt(this.t1) * parseInt(this.t2);
break;
case '/':
this.t3 = parseInt(this.t1) / parseInt(this.t2);
break;
}
//解析字符串并运算,不推荐使用
//var codeStr = 'parseInt(this.t1)' + this.opt + 'parseInt(this.t2)'
//this.t3 = eval(codeStr)
}
}
})
</script>
</body>
</html>