当前位置：首页 > news >正文

vue的事件修饰符、数组变化侦测、计算属性、class绑定、style绑定

news 2025/11/24 9:03:06

一、事件修饰符

功能：用于简化代码。

.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>