Vue-computed的set和get

最新推荐文章于 2022-07-22 11:50:25 发布
转载 最新推荐文章于 2022-07-22 11:50:25 发布 · 82 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/superlizhao/p/9621081.html

本文通过一个简单的示例展示了如何使用Vue.js实现双向数据绑定。具体包括姓名的两个部分（firstName和lastName）以及年龄(age)的显示与更新。通过定义计算属性fullName实现了视图与数据模型之间的同步。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{fullName}}
    {{age}}
  </div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script>
var app=new Vue({
    el:'#app',
    data:{
      firstName:'li',
      lastName:'zhao',
      age:18
    },
    computed:{
      fullName:{
        get:function(){
          return this.firstName+' '+this.lastName
        },
        set:function(value){
          var arr = value.split(' ');
          this.firstName = arr[0];
          this.lastName = arr[1];
        },
      }
    }
})
</script>
</html>

 

转载于:https://www.cnblogs.com/superlizhao/p/9621081.html

VUE3语法--computed计算属性中get和set使用案例
雾林小妖的博客
02-04 5412
vue3中computed计算属性的含义及使用方式
Vue Computed中get 和set的了解以及Computed与watch的区别
前端程序猿的博客
01-07 3533
vue的computed方法get和 set详解， computed中get和set的栗子（引用官网），computed与watch的区别，computed与watch的不同点还有相同点，项目中的使用总结。
vue2 computed set与get函数
weixin_30586085的博客
04-10 228
大家都知道computed简单的使用方法，这儿只分享一下setter和getter用法： setter：设置值时触发。 getter：获取值时触发，与setter是没有必然联系的。 <template > <div> <button @click='fn'>设置</button> //点击后fn函数执行。 <...
vue_computed用法
weixin_30492047的博客
02-05 85
vue_computed用法 1类文件 function CLASS_VUE() { this.start=function (selector,dataObject) { var gb={el: selector, data: dataObject}; return new Vue(gb);...
VUE - 计算属性computed的用法详解
ICanWin_lll的博客
01-17 1599
一.基本用法 当需要对数据进行某些加工的时候推荐用计算属性： <div id="app"> <h2>{{fullName}}</h2> </div> <script> const app = new Vue({ el: '#app', data: { firstName: 'Lebron', lastName: 'James' }, // computed: 计算属性()
Vue中computed用法
sunshineTing2的博客
04-23 8万+
一、 computed是什么？ 对于任何复杂逻辑，你都应当使用计算属性。 computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义. 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理； computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化， 举例：总金额=价...
Vue的Computed中的setter的使用
mapbar_front的博客
05-26 1万+
背景说明 vue中的计算属性，是根据数据data的变化，有自动更新属性的效果。 但是有时候，我们需要改变计算属性，也就是在计算属性的基础上，给它进行赋值，这个时候，我们就用到了setter。 计算属性的getter和setter。 通常情况下，一个计算属性，通常默认有getter。基本写法如下： computed: { choicedList: function () { ...
vue.js的computed,filter,get,set的用法及区别详解
11-28
在Vue 2.0的计算属性中，get()和set()用于创建具有计算逻辑和数据绑定的属性。这与计算属性类似，但更适用于在响应式系统中管理数据的读取和修改。 总结来说，Vue.js提供了多种方式来处理数据和逻辑，每种都有其...
Vue computed中的get和set方法
seimeii的博客
07-22 1605
vue computed中set和get的用法
通俗易懂的 Vue - Computed 原理（Watcher and Dep）
十七的博客
01-05 2061
大家好，新人一个，初次写博客还请大家多多关照。 对于Vue的响应式，想必大家都有所了解，在Vue响应式数据中，computed是比较特殊的响应式数据，它们可以监听使用到的数据，数据 改变computed的数据也会重新计算。 今天主要是讨论 computed 实现原理 。 computed在内部主要是运用 Watcher和 Dep构造函数进行收集依赖和派发更新。 咱们先来看看 Watcher和 Dep源码。 var uid = 0; /** * dep 就是用来给每...
vue 中 computed属性中的get与set；
YZ_ZZZ24的博客
05-17 8683
1.computed是对⾃⼰定义的变量进⾏监控，这⾥的变量不是在data中定义，直接 在computed中定义，然后变量放到展⽰页⾯后就实现了数据的双向绑定，当变量发 ⽣改变是就会触发计算，说到这就要说说第⼆点get和set ⽅法了， 2.computed中有get和set⽅法，（在默认的情况下只有get） 1.get⽅法是取，相当于我们可以在get中给这个计算属性中的变量赋值 2.set⽅法是改变时触发，这⾥的改变指的是当我们在computed中定义的变量的值发⽣改变是，会触发set⽅法，这样我们就
vue computed正确使用方式
热门推荐
李刚的学习专栏
07-03 12万+
最近面试中，遇到一个小伙子，谈到了vue中的 computed 和 watch 区别，最后得到了一个让我瞠目结舌的答案，只用 watch，从不用 computed 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，vue 提倡使用计算属性。需要特别说明：计算属性的 getter 函数是没有副作用 (side effec...
vue定义在computed的变量无法更新
明日复明日的博客
05-10 6794
情境是这是线上商城的详情页面，商品详情是items数组，点击分类页面的商品，路由跳转到详情页面，路由参数是商品在items中的序号。 但是问题是只有第一次点击商品i的时候可以正常加载items[i]的数据到html中，退出后点击商品j，发现加载的还是商品i的信息，只有刷新后才会更新成商品j的信息。 部分代码： <shopPanel :key = "nums" :goodname="item.text" :tag="
vue 报错： [Vue warn]: Computed property "checkall" was assigned to but it has no setter.
qq_35176916的博客
01-19 1万+
报错如图： 报错原因： computed:{ checkall:{ //购物车与checked数量一致时，全选为true get(){ return this.cartCheckedCount===this.items.length; } } } 分析： 该报错是和computed联系在一起的，我们知道computed动态...
vue计算方法 computed
个人工作学习内容总结
09-08 423
当用到计算属性时，，方法默认返回的时get方法 例： computed: { fixedHeader: { return this.$store.state.settings.fixedHeader } } 这里默认返回get方法，实际计算属性 如下： computed: { fixedHeader: { get() { return this.$store.state.settings.fixedHeader },
Vue中computed分析
WindRunnerMax
09-26 1332
Vue中computed分析 在Vue中computed是计算属性，其会根据所依赖的数据动态显示新的计算结果，虽然使用{{}}模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模板中放入太多的逻辑会让模板过重且难以维护，所以对于任何复杂逻辑，都应当使用计算属性。计算属性是基于数据的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，也就是说只要计算属性依赖的数据还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数，当然如果不希望使用缓存可以使用方法属性并返
Vue之computed计算属性
sunlizhen的专栏
05-09 749
1. 计算属性就是根据一定的逻辑，将一个新属性与data数据的某个属性进行关联，由此获取与原数据对应的值 在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以 2.简单的说，就是data中有数据A，另一个B结果与A有一定的关联，需要A通过计算得到，既可以用计算属性； 如： <div id="test"> 你输入的：<input...
vue3 computed 的set和get
最新发布
01-11
### Vue3 中 `computed` 属性的 `set` 和 `get` 方法 在 Vue3 中，`computed` 属性默认只提供了一个读取器 (`getter`) 函数来计算派生数据。然而，在某些场景下可能也需要设置一个写入器 (`setter`) 来响应特定属性的变化。 #### 基本概念 对于仅需读取的数据，定义简单的 getter 即可： ```javascript const nextYear = computed(() => { return +year.value + 1; }); ``` 此代码片段展示了如何创建一个依赖于其他状态变量（此处为 `year`）并基于其值动态更新的结果[^1]。 当希望允许外部更改通过某个计算属性间接影响源数据时，则需要同时指定 setter: ```javascript const fullName = computed({ get: () => `${firstName.value} ${lastName.value}`, set: (newValue) => { const names = newValue.split(' '); firstName.value = names[0]; lastName.value = names[names.length - 1]; } }); ``` 上述例子说明了怎样利用对象形式配置带有自定义逻辑的 getter/setter 对组合[^2]。 #### 实际应用案例 考虑如下 HTML 结构用于展示和编辑用户的全名： ```html <template> <div> <label>First Name:</label><input v-model="firstName"> <br/> <label>Last Name:</label><input v-model="lastName"> <h4>Edit Fullname Directly</h4> <label>Full Name:</label><input v-model="fullName"> </div> </template> <script> import { ref, computed } from 'vue'; export default { setup() { let firstName = ref(''); let lastName = ref(''); // 定义具有 getter 和 setter 的计算属性 const fullName = computed({ get: function () { return `${firstName.value} ${lastName.value}`; }, set: function(newValue){ var names = newValue.split(' '); firstName.value = names[0]; lastName.value = names[names.length - 1]; } }); return { firstName, lastName, fullName }; } }; </script> ``` 在这个实例里，用户可以直接输入完整的姓名字符串到第三个 `<input>` 字段中，而无需分别填写姓氏和名字；反之亦然——单独修改任一字段也会同步反映在整个显示区域上[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值