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

本文主要是介绍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绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---