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>

相关推荐
喜欢你,还有大家23 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在27 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi38 分钟前
Dokploy安装和部署项目流程
运维·前端
普通网友40 分钟前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢42 分钟前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
随风飞翔的胖子1 小时前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端