一， 监听器 watch
- 用于监听数据的变化并执行相应的操作，通过 watch 选项，您可以监视一个特定的数据属性，并在该属性发生变化时执行一些逻辑
点击查看代码
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
watch: {
count(newValue, oldValue) {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}
},
methods: {
increment() {
this.count++;
}
}
};
</script>
二， 过滤器 filter
在 Vue 中，过滤器（Filter）是一种用于处理文本格式化的功能。过滤器可以在数据渲染之前对数据进行一些特定的处理，例如格式化日期、转换大小写、截取字符串等。Vue 提供了一种简单的方式来定义和使用过滤器。
点击查看代码
<template>
<div>
<p>{{ message | capitalize }}</p>
<p>{{ date | formatDate }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'hello world',
date: '2022-01-01'
};
},
filters: {
capitalize(value) {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
},
formatDate(value) {
if (!value) return '';
return new Date(value).toLocaleDateString();
}
}
};
</script>