Vue computed setter

最新推荐文章于 2024-06-11 08:00:00 发布
最新推荐文章于 2024-06-11 08:00:00 发布
阅读量420 收藏 1
点赞数
分类专栏： Vue 文章标签： computed setter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sosemseo/article/details/109103332
版权

　　computed属性默认只有getter，不过在需要时你也可以提供一个setter：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ site }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
	name: 'Google',
	url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '代元培 http://www.sosemseo.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>

// 运行结果
代元培 http://www.sosemseo.com

name: 代元培
url: http://www.sosemseo.com

　　从实例运行结果看在运行vm.site='代元培 http://www.sosemseo.com'时，setter会被调用，vm.name和vm.url也会被对应更新。

代元培
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 computed中的setter
白瑕 的博客
10-02 2385
Vue2computed中setter的使用方法, 在什么情况下使用setter, 对于setter的一些个人见解.
Vue的Computed中的setter的使用
热门推荐
mapbar_front的博客
05-26 1万+
背景说明 vue中的计算属性，是根据数据data的变化，有自动更新属性的效果。 但是有时候，我们需要改变计算属性，也就是在计算属性的基础上，给它进行赋值，这个时候，我们就用到了setter。 计算属性的getter和setter。 通常情况下，一个计算属性，通常默认有getter。基本写法如下： computed: { choicedList: function () { ...
【vue3|第8期】深入理解Vue 3 computed计算属性
最新发布
Commas的博客
06-11 1037
在Vue3的世界里，计算属性（computed）是一个非常强大且实用的特性。它为我们在处理数据依赖和动态计算方面提供了极大的便利。今天，就让我们一起来深入探讨Vue3中的 computed。
Vue计算属性computed的setter用法
u010234868的专栏
09-03 797
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
vue中computed以及getter和setter
Sunshinedada的博客
12-02 2857
vue中computed以及getter和setter Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值。 因此在 computed 中可以分成 getter（读取） 和 setter（设值）， 一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： <div id="demo">{{ fullName }}</
vue.js计算属性computed(getter和setter)
Amanda_wmy的博客
11-05 979
vue.js计算属性computed(getter和setter) 介绍： 在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值 vue.js计算属性默认只有 gette...
Vue computed 计算属性代码实例
10-15
在 Vue 中，`computed` 属性是一个非常重要的特性，它允许我们创建基于现有数据的派生属性。这些计算属性会在其依赖数据发生变化时自动更新，极大地提高了代码的可读性和维护性。 1. **什么是计算属性？** 计算...
Vue中computed及watch区别实例解析
10-15
在Vue.js框架中，`computed`和`watch`都是用于处理数据变化的机制，但它们在功能和使用场景上存在显著的区别。以下是关于这两个概念的详细解析。 **计算属性（Computed）** 计算属性`computed`主要用于创建基于现有...
vue 解决computed修改data数据的问题
10-16
为了解决这个问题，Vue提供了 `setter` 和 `getter`，允许我们在 `computed` 中创建可写的属性。在上述例子中，`fold` 是一个 `data` 属性，而 `listShow` 是一个具有 `getter` 和 `setter` 的 `computed` 属性。 `...
Vue的data、computed、watch源码浅谈
10-15
本文将深入探讨Vue中data、computed和watch三个关键概念的源码实现，帮助理解它们的内部工作机制。 首先，`data` 是Vue实例中用于存放可响应式数据的地方。当我们在Vue组件中定义`data`，Vue会将其中的属性转换为...
vue中computed 和 watch的异同！
04-02
3. getter 和 setter：`computed` 支持 getter 和 setter，getter 在获取值时触发，setter 在设置值时触发，提供了对计算属性更细粒度的控制。 4. 示例： ```javascript new Vue({ data: { firstName: 'Den', ...
vue的computed中的getter和setter
weixin_71893790的博客
12-13 691
vue的computed中的getter和setter
vue计算属性computed--getter和setter
weixin_53961451的博客
06-17 1433
vue计算属性computed--getter和setter
Vue3进阶：计算属性（computed）的介绍、使用详解和代码实战案例
SteveRocket's-Blog
12-17 6403
Vue 3中的计算属性是Vue中的一种特殊属性，它基于现有数据进行计算（根据其他属性的值进行动态计算），并返回一个新的值。与方法（methods）相比，计算属性的特点是具有缓存机制，只有依赖的数据发生改变时才会重新计算。关于methods的使用可以参考公众号CTO Plus前面的文章，当然后面的文章也会专门做介绍。计算属性在Vue开发中非常常用，它既能提升开发效率，又能使代码更加简洁和可读性更高。在本文中，我将为大家详细介绍Vue 3中的计算属性的概念、用法和优势。
vue computed计算属性 缓存/setter getter
weixin_42448623的博客
08-09 1273
文章目录基本用法setter getter计算属性缓存 基本用法 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。 <div id="app"> {{fulName}} </div> <script> const vm = new Vue({ el:"#app", data:{
vue computed 可以使用getter和setter
weixin_33690367的博客
09-21 166
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { return th...
vue3中的computed
m0_60189088的博客
05-13 4541
computed计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改；如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。
vue3之计算机属性（computed）和监视（watch，watchEffect）
CYL_2021的博客
07-09 586
基础代码： 由于fullName1只有getter方法（只读），不能设置新的值，只能获取 改变user.lastName get方法在获取的时候调用，set方法在值改变的时候调用监视一个数据： watch监视多个数据: 使用数组来指定 如果是ref对象, 直接指定 如果是reactive对象中的属性, 必须通过函数来指定 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据默认初始时就会执行第一次, 从而可以收集需要监视的数据监视数据发生变化时回调...
Vue中computed 计算机属性、getter、setter
weixin_50723416的博客
08-09 800
计算属性 在模板表达式中放入太多逻辑时，会让模板重且难以维护。比如： // 错误示例 <div id="example"> {{ message.split('').reverse().join('') }} </div> 应该声明一个计算属性，该计算属性不用挂载到Vue实例的data上，而是在Vue实例中的computed上。程序员编写的函数将作用与 property.vm.reversedMessage 的 getter函数 具体看https://cn.vuejs.org/
vue Computed setter
06-11
在 Vue 中，计算属性（Computed）是一种可以根据现有数据计算出其他数据的属性。计算属性是基于它所依赖的数据进行缓存的，只有当计算属性依赖的数据发生改变时，才会重新计算。 如果你需要给计算属性赋值，那么你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值