2.v-on
作用:事件绑定。
2.1 格式:v-on:事件类型="函数名称"
它也有语法糖的写法:省略v-on:使用@符号代替
@事件类型="函数名称"
我们需要将事件函数写在vue实例中的method属性中。
例子
<div id="app">
<button @click="fn">按下我的座驾</button>
</div>
<script src="./js/vue.min.js"></script>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:"那我走?"
},
methods:{
fn:function(){
alert(vue.msg)
}
}
})
</script>
效果
构造函数两种情况:
- 当构造函数中有参数,我们没能传是实参是,vue默认会将原生事件对象event传入
- 那如果方法有参数,我们也需要事件对象进行处理,vue提供了一个特殊变量$event可以阻止a标签的默认行为。
<div id="app">
<button @click="fn1('hellow',$event)">按下我的座驾</button>
</div>
<script src="./js/vue.min.js"></script>
<script>
let vue = new Vue({
el:"#app",
data:{
msg:"那我走?"
},
methods:{
fn:function(){
alert(vue.msg)
},
fn1(n,m){
console.log(n);
console.log(m);
}
}
})
</script>
2.2 修饰符
上面的案例,我们也可以用修饰符来做。在@绑定的事件后添加小圆点‘.’,再跟一个后缀来使用修饰符。
常见的修饰符如下:
stop:阻止冒泡
prevent:阻止浏览器默认行为
once:只触发一次。
这三种的用法
3. 条件渲染
3.1 v-if
true渲染(创建该节点),false不存在该节点(删除该节点)--------DOM不存在
3.2 v-else
与v-if搭配使用,不满足v-if则执行该内容
3.3 v-else-if
多个条件进行判断
3.4 v-show
true渲染(显示该节点),false(隐藏该节点)--------相当于display:black/none
;
【注意】
- v-if,v-else,v-else-if这之间不能加别的内容
- ,v-else,v-else-if 不能单独使用,必须搭配v-if使用
v-if
与v-show
的区别: 前者为创建和删除,后者为显示和隐藏。但是创建和删除比较消耗资源。所以需要频繁切换时建议使用v-show
v-if
与v-show
的区别的代码
<div id="app">
<p v-if="msg">那我走?</p>
<p v-show="msg">那你走吧,我就不送了!</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
let vue = new Vue({
el:"#app",
data:{
msg: false,
},
})
</script>
效果图
v-if,v-else,v-else-if
条件渲染的代码
<div id="app">
<p v-if="msg">那我走?</p>
<p v-show="msg">那你走吧,我就不送了!</p>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=60">合格</p>
<p v-else>差</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
let vue = new Vue({
el:"#app",
data:{
msg: true,
score:80,
},
})
效果图