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>

相关推荐
孩子 你要相信光8 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军9 分钟前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql52019 分钟前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy33 分钟前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days205034 分钟前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL1 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉1 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js