本文主要是介绍vue的事件修饰符、数组变化侦测、计算属性、class绑定、style绑定,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、事件修饰符
功能:用于简化代码。
- .stop 阻止事件冒泡
- .prevent 阻止默认事件
- .once
- .enter
两种使用方式:
e.stopPropagation(); //第一种
@click.stop="clickP" //第二种
二、数组变化侦测
分为两类:
1、能够引起UI的自动更新:
- .push()
- .pop()
- .shift()
- .unshift()
- .splice()
- .sort()
- .reverse()
2、值会改变,但是不会引起UI自动更新:
- .filter()
- .concat()
- .slice()
三、计算属性
写一个函数来计算,避免前方代码臃肿: 用computed来实现
<template>
<h3>{{ pangjuzi.name }}</h3>
<p>{{ pangjuzicontent}}</p>
</template>
<script>
export default {
data(){
return {
pangjuzi:{
name:"胖橘子",
content:["前端","pyhton","java"]
}
}
},
//计算属性;
computed:{
pangjuzicontent(){
return this.pangjuzi.content.length > 0 ? 'yes' :"no"
}
}
}
</script>
注意:计算属性和methods方法虽然有些类似,但是在调用上有差别。计算属性:计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算方法:方法调用总是会在重渲染发生时再次执行函数。因此使用计算属性会更好。
四、class绑定
绑定对象
<template>
<div :class="{ active: isActive, 'text-danger ' : hasError}">isActive</div>
</template>
<script>
export default {
data(){
return{
isActive : true,hasError : true
}}
}
</script>
五、 style绑定
绑定对象
<template>
<div :style="{ color: activecolor,fontsize: fontsize + 'px’}">style绑定</div>
</template><script>
export default {
data() {
return {
activecolor: 'red ' ,
fontsize: 30}
}
}
</script>
这篇关于vue的事件修饰符、数组变化侦测、计算属性、class绑定、style绑定的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!