computed setter

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

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app"></div>
 
    <script>
      const app = {
        data() {
          return {
            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]
            },
          },
        },
      }
      vm = Vue.createApp(app).mount('#app')
      document.write('name: ' + vm.name)
      document.write('<br>')
      document.write('url: ' + vm.url)
      document.write('<br>------ 更新数据 ------<br>')
      // 调用 setter， vm.name 和 vm.url 也会被对应更新
      vm.site = 'Baidu http://www.baidu.com'
      document.write('name: ' + vm.name)
      document.write('<br>')
      document.write('url: ' + vm.url)
    </script>
  </body>
</html>

posted @ 2022-04-28 15:32 wjxuriel 阅读(30) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue3 计算属性

· 我们注册一个 button-counter 组件，在每次点击后，计数器会加 1:

· computed中get和set方法

· vue中的computed用法 get set方法

· 【vue核心技术实战精讲】1.12 - 1.13 计算属性之computed的setter方法

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

公告

Live2D

Talk is cheap,
show me your code!

昵称： wjxuriel
园龄： 2年10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

my-blog-site

Email： wjxuriel@petalmail.com

computed setter

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Vue 测试实例</title>
	<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
	<div id="app"></div>

	<script>
	const app = {
	data() {
	return {
	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]
	},
	},
	},
	}
	vm = Vue.createApp(app).mount('#app')
	document.write('name: ' + vm.name)
	document.write('<br>')
	document.write('url: ' + vm.url)
	document.write('<br>------ 更新数据 ------<br>')
	// 调用 setter， vm.name 和 vm.url 也会被对应更新
	vm.site = 'Baidu http://www.baidu.com'
	document.write('name: ' + vm.name)
	document.write('<br>')
	document.write('url: ' + vm.url)
	</script>
	</body>
	</html>