事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
双向绑定 v-model
v-model可以实现表单元素和Model中数据的双向数据绑定,
注意v-model只能运用在表单元素中,比如 input
(radio,text,address,email),select
checkbox
textrea
重点 v-model的原理以及实现原理:
- input输入值后更新data
- data的属性赋值后更新input的值
- 详细解释
简易计算器
设计思路:html部分
- 两个双向绑定的输入文本框,一个双向绑定的选择计算公式的选择框,一个输出文本框,一个触发事件的按钮
- 文本框代码如下
<input type='text' v-model='num1'>
- 选择计算公式可以用select 代码如下
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
- 触发实践使用v-on绑定事件,代码如下
<input type="button" value="=" @click="cal">
- 输出文本框
<input type="text" v-model="resul">
设计思路:vue部分
var vm = new Vue({
el:'#app',
data:{
num1:0,
num2:0,
resul:0,
opt:'+',
},
methods:{
cal(){
//这里可以使用switch循环
/* switch(this.opt){
case '+':this.resul=parseInt(this.num1) + parseInt(this.num2)
break;
case '':
break;
case '':
break;
case '':
break;
case '':
break;
} */
//使用switch代码量过大,我们可以使用JS中的eval()方法:eval(String) 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
//首先使用一个字符串接受计算公式
codeStr = 'parseInt(this.num1)'+ this.opt + 'parseInt(this.num2)'
this.resul = eval(codeStr)
}
}
})