前端学习——Vue (Day4)

**前端学习——Vue (Day4)**### 前言在上一节中，我们已经了解了 Vue 的基本概念、生命周期函数以及组件的使用。今天，我们将继续深入探讨 Vue 的其他重要特性，包括计算属性、侦听器和过滤器。

### 计算属性（Computed Properties）

计算属性是 Vue 中的一个非常有用的特性，它们允许我们在模板中使用简洁的表达式来计算数据，而不需要写复杂的 JavaScript代码。计算属性通常用于根据其他数据进行简单的运算或转换。

#### 示例

html<template>
 <div>
 <p>姓名：{{ name }}</p>
 <p>年龄：{{ age }}</p>
 <p>姓名首字母大写：{{ name | uppercase }}</p>
 </div>
</template>

<script>
export default {
 data() {
 return {
 name: 'John Doe',
 age:30 }
 },
 computed: {
 // 计算属性，返回name的首字母大写 upperCaseName() {
 return this.name.charAt(0).toUpperCase() + this.name.slice(1)
 }
 }
}
</script>

在上面的示例中，我们定义了一个计算属性 `upperCaseName`，它将 `name` 的首字母转换为大写。我们可以在模板中使用这个计算属性，如下所示：

html<p>姓名首字母大写：{{ upperCaseName }}</p>

###侦听器（Watchers）

侦听器是 Vue 中的一个特性，它们允许我们监视数据的变化，并在发生变化时执行某些操作。侦听器通常用于根据数据的变化进行一些复杂的逻辑处理。

#### 示例

html<template>
 <div>
 <p>姓名：{{ name }}</p>
 <button @click="changeName">改变姓名</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 name: 'John Doe'
 }
 },
 methods: {
 // 更改姓名 changeName() {
 this.name = 'Jane Doe'
 }
 },
 watch: {
 // 监视name的变化 name(newVal, oldVal) {
 console.log(`姓名从${oldVal}变为${newVal}`)
 }
 }
}
</script>

在上面的示例中，我们定义了一个侦听器 `watch`，它监视 `name` 的变化。当 `name` 变化时，它会输出一条日志到控制台。

### 过滤器（Filters）

过滤器是 Vue 中的一个特性，它们允许我们在模板中使用简洁的表达式来过滤数据。过滤器通常用于根据某些条件进行数据的筛选或转换。

#### 示例

html<template>
 <div>
 <p>姓名：{{ name }}</p>
 <button @click="changeName">改变姓名</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 name: 'John Doe'
 }
 },
 methods: {
 // 更改姓名 changeName() {
 this.name = 'Jane Doe'
 }
 },
 filters: {
 // 过滤器，返回name的首字母大写 uppercase(val) {
 return val.charAt(0).toUpperCase() + val.slice(1)
 }
 }
}
</script>

在上面的示例中，我们定义了一个过滤器 `uppercase`，它将 `name` 的首字母转换为大写。我们可以在模板中使用这个过滤器，如下所示：

html<p>姓名首字母大写：{{ name | uppercase }}</p>

### 总结今天，我们学习了 Vue 中的计算属性、侦听器和过滤器。这些特性允许我们在模板中使用简洁的表达式来计算数据、监视数据的变化以及进行数据的筛选或转换。通过掌握这些特性，我们可以更好地构建复杂的 Vue 应用程序。

### 参考* [Vue.js 文档]( />* [Vue.js API 文档](