Vue.js每天必学之计算属性computed与$watch

下面是详细讲解 Vue.js 中计算属性 computed 与 $watch 的攻略。

计算属性 computed

概念

计算属性是一种带有缓存功能的属性,它依赖于其它属性值,并且其返回值会根据这些被依赖的值变化而改变。计算属性除了需要响应式依赖,还可以拥有自己的缓存,只要它所依赖的属于没有发生改变,那么多次读取该计算属性时,只会进行一次计算。

用法

我们可以在 Vue 组件的 computed 选项中定义计算属性,computed 的属性值应该是一个返回数据的函数。在模板中使用计算属性时就像使用普通属性一样,我们可以像绑定普通属性一样绑定计算属性,例如:{{computedProp}}。

示例说明

下面我们来看两个问题,如何将价格转换为美元($)和欧元(€)。对于上述问题,可以使用计算属性来实现。

<template>
  <div>
    <h2>价格</h2>
    <p>原价:{{price}}元</p>
    <p>美元价格:{{priceDollar}}$</p>
    <p>欧元价格:{{priceEuro}}€</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      exchangeRate: {
        dollar: 0.14,
        euro: 0.118,
      },
    };
  },
  computed: {
    priceDollar() {
      return (this.price * this.exchangeRate.dollar).toFixed(2);
    },
    priceEuro() {
      return (this.price * this.exchangeRate.euro).toFixed(2);
    },
  },
};
</script>

在上面的代码中,我们定义了一个 price 属性表示价格,exchangeRate 属性表示汇率,我们分别定义了两个计算属性 priceDollar 和 priceEuro,在 priceDollar 中通过乘以相应汇率计算了美元价格,在 priceEuro 中通过乘以相应汇率计算了欧元价格。最后在模板中分别使用了 priceDollar 和 priceEuro 来展示相应的价格。

$watch

概念

$watch 是一个实例方法,它用于监听 Vue 实例属性的变化,当一个被监听的对象发生变化时,$watch 会执行响应的处理函数。

用法

Vue 实例可以使用 $watch 方法观察一个表达式的变化,表达式可以是一个函数或者是一个字符串。在观察期间,每当表达式的值发生改变时,$watch 将调用绑定的回调函数。

vm.$watch(expOrFn, callback, [options]);

以上代码中,expOrFn 表示被监听的属性或者函数,callback 表示属性变化时执行的回调函数,options 表示一些选项。

示例说明

下面我们来看一个问题,输入框中实时展示输入文字的长度。

<template>
  <div>
    <h2>输入框</h2>
    <p>已输入{{inputLength}}个字符</p>
    <input v-model="inputText" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      inputLength: 0,
    };
  },
  watch: {
    // 监听 inputText 的长度变化,更新 inputLength
    inputText: function(val) {
      this.inputLength = val.length;
    },
  },
};
</script>

在上面的代码中,我们定义了一个 inputText 属性表示输入框中的文本,inputLength 表示输入文本的长度,我们定义了一个 $watch 监听 inputText 的变化,每当 inputText 发生变化时,$watch 会调用定义的处理函数,将 inputText 的长度赋值给 inputLength,从而展示输入文本的长度。最后在模板中展示了输入文本的长度和实时更新的输入框。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue.js每天必学之计算属性computed与$watch - Python技术站

(0)
上一篇 2023年5月29日
下一篇 2023年5月29日

相关文章

  • Vue中props的使用详解

    Vue中props的使用详解 什么是props 在Vue中,每个组件都可以接受一些参数,这些参数被称为props。props是一个数组,在组件定义中声明。你可以使用props从父组件中传递数据到子组件中。 如何使用props 在组件定义中声明props属性,用于接收父组件中传递的数据。在组件使用中,使用v-bind指令将需要传递给子组件的数据,绑定到组件的对…

    Vue 2023年5月28日
    00
  • vue再次进入页面不会再次调用接口请求问题

    Vue再次进入页面不会再次调用接口请求问题,主要是因为Vue实现了单页应用(SPA)的机制,它使用了Vue-router来处理路由,当我们切换路由时,Vue-router只会切换组件,而不会重新请求数据。下面是详细的解释和攻略过程。 1. Vue-router实现SPA Vue使用Vue-router来实现路由,Vue-router是Vue.js官方的路由管…

    Vue 2023年5月28日
    00
  • vue编写的功能强大的swagger-ui页面及使用方式

    什么是Swagger-UI页面? Swagger UI是一个通过注解的方式为 RESTful API 描述文档生成在线文档界面的工具。通过Swagger UI,我们可以详细地查看到API接口的信息,包括接口名称、接口描述、请求地址、请求方式、参数类型、参数描述、响应状态码等等。Swagger UI可以很方便地帮助我们对API接口进行测试与调试。 如何使用Vu…

    Vue 2023年5月28日
    00
  • vue-ajax小封装实例

    下面我将为您详细讲解”vue-ajax小封装实例”的完整攻略。 介绍 在Vue.js中,我们经常需要通过ajax向服务端请求数据或提交数据,而Vue.js并没有提供自带的ajax函数。因此,我们需要自己针对Vue.js进行封装ajax函数,以便能够在Vue.js中更好地使用ajax请求。 axios与vue-resource选择 目前,市面上流行的封装Aja…

    Vue 2023年5月28日
    00
  • vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

    请听我为您详细介绍vue3中ref、isRef、toRef、toRefs、toRaw的作用和用法。 一、ref ref是Vue3提供的一个响应式数据类型,将非响应式数据转换为响应式数据。 ref接收一个参数,返回的是一个对象,通过修改对象的value属性来更新数据。 import { ref } from ‘vue’ const count = ref(0)…

    Vue 2023年5月28日
    00
  • vue打包项目版本号自加的操作步骤

    下面是对“Vue打包项目版本号自加的操作步骤”的完整攻略: 1. 在package.json中设置版本号 在进行打包操作之前,需要在package.json文件中对项目的版本号进行设置。 { "name": "my-project", "version": "1.0.0", //…

    Vue 2023年5月28日
    00
  • vue实现文件上传功能

    下面我将详细介绍如何使用Vue实现文件上传功能,过程中将包含两个示例。 一、准备工作 1. 安装依赖 首先需要安装axios和qs这两个依赖。axios是一个基于promise的HTTP请求库,可以用于浏览器和Node.js,而qs是用于解析和格式化查询字符串的工具。 npm install axios qs 2. 配置请求头 当我们进行文件上传时,需要将请…

    Vue 2023年5月28日
    00
  • Vue组件间通信的实现方法讲解

    Vue组件间通信的实现方法讲解 在Vue开发中,组件之间的通信是非常重要的。本文将介绍Vue组件间通信的实现方法。 1. 父组件传递Props 父组件通过props属性将数据传递给子组件。子组件通过props对这些数据进行监听并使用。 假设有一个父组件Parent和一个子组件Child。在Parent中传递一个属性message给Child: <tem…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部