Vue计算属性的Setter

最新推荐文章于 2022-08-28 21:43:30 发布
最新推荐文章于 2022-08-28 21:43:30 发布
阅读量352 收藏
点赞数
分类专栏： 前端 文章标签： vue.js 前端 javascript
原文链接：https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95
版权 
<!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">
    <title>计算属性的Setter</title>
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div> {{ firstName }} </div>
        <div> {{ lastName }} </div>
        <div>  {{ fullName }} </div>
    </div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    firstName: 'Ang',
                    lastName: 'Li'
                }
            },
            computed: {
                fullName: {
                    // getter
                    get() {
                        return this.firstName + ' ' + this.lastName;
                    },
                    // setter
                    set(newValue) {
                        const names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length-1];
                    }
                }
            }
        }).mount('#app');
        vm.fullName = 'Li Lai';
    </script>
</body>
</html>
Anbelin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 理解之白话 getter/setter详解
10-17
主要介绍了Vue getter setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue —— 计算属性 setter
HuoZhiyan 的博客
04-02 1033
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。 <!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-.
14 Vue-计算属性setter
行走的皮卡丘
08-07 506
14 Vue-计算属性setter
（16）计算属性的 setter
Java田根旺
02-04 912
一、计算属性的setter介绍 计算属性默认只有 getter，Vue.js 也允许给计算属性设置setter 。 示例一：默认书写方式 <body> <div id="app"> <p>{{ fullName }}</p> </div> <script src="../01.vue.js入门/js/vue-2.6.14.js"></script> <script> n
15.计算属性Setter进阶 ---(vue入门 文档学习记录)
爱飞的笨鸟的博客
07-08 337
计算属性setter 一般情况计算属性只有getter,并且默认不用显示的表明getter方法,也可以有setter方法: <div id="app15"> <p> <input v-model="message"></input> <input v-model="revmessage"></input>...
关闭Vue计算属性自带的缓存功能方法
08-27
下面小编就为大家分享一篇关闭Vue计算属性自带的缓存功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue计算属性的使用
08-29
本篇文章主要介绍了Vue计算属性的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 计算属性 vue2.xxx
12-20
computed 计算属性使用
vue计算属性及使用详解
12-29
这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。  二、计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一...
初识 Vue（10）---(计算属性的 setter 和 getter)
姜皓的博客
07-27 1814
计算属性的 setter 和 getter 方法一： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算属性、方法、侦听器&lt;/title&gt; &lt;script src="./vu
Vue的计算属性
qq_63608386的博客
08-28 1248
vue计算属性
vue——9-vue计算属性-setter
肖的博客
09-16 150
&lt;div id="enjoy"&gt; &lt;!--lucy bob--&gt; &lt;p&gt;{{fullName}}&lt;/p&gt; &lt;!--john tom--&gt; &lt;button @click="deal()"&gt;调用setter方法&lt;/button&gt; &lt;/
Vue - 深入使用计算属性 —— setter 和 getter
技术共享，共同进步！
05-14 2113
       在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。        每一个计算属性都包含一个 getter 方法和一个 setter 方法。 一.  如果计算属性后面直接是一个 function函数，使用的就是计算属性的方法 getter 来读取。 <template> <d
Vue的Computed中的setter的使用
热门推荐
mapbar_front的博客
05-26 1万+
背景说明 vue中的计算属性，是根据数据data的变化，有自动更新属性的效果。 但是有时候，我们需要改变计算属性，也就是在计算属性的基础上，给它进行赋值，这个时候，我们就用到了setter。 计算属性的getter和setter。 通常情况下，一个计算属性，通常默认有getter。基本写法如下： computed: { choicedList: function () { ...
Vue中计算属性的getter跟setter
killbee365的博客
04-30 752
每个计算属性都包含一个getter跟一个setter 当你没有set方法的时候那么你的计算属性就只有只读属性，不能被更改，set方法可以省略，当你计算属性设为只读属性的时候，get也可以省略。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...
Vue基础（计算属性和观察者）
Vivianluolita的专栏
12-11 456
计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }} </div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次
计算属性的 setter
lixiaonaaa的博客
02-02 508
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。 例如，要实现输入框的双向绑定 姓： <input type="text" placeholder="first name" v-modal="firstName"> 名： <input type="text" placeholder="last name" v-modal="lastName"> 姓名： <input type="text" placeholder="full name" ..
vue 计算属性的setter和getter
HuangsTing的博客
08-13 508
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter getter 用于监控属性变化时触发。 set可选，当computed属性自身被赋值时触发 <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ ...
Vue--计算属性（getter/setter）
djz917的博客
06-14 3999
通常我们会在模板中绑定表达是，模板是用来描述视图结构的。如果模板中的表达式存在过多逻辑，模板就会变得臃肿不堪，难以维护。为了简单逻辑，当某个属性依赖于其他属性的值时，我们可以使用计算属性。什么是计算属性计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步更新。&lt;div id="example"&gt; &lt;input type="text" v...
vue的计算属性做setter
最新发布
09-23
在Vue中，计算属性可以通过定义getter和setter来实现。getter用于获取计算属性的值，而setter用于给计算属性赋值。通过setter，我们可以在给计算属性赋值时触发一些特定的逻辑或操作。 在Vue中定义计算属性的setter...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值