computed setter

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

实例 4

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.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

尝试一下 »

从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。

 

computed setter的更多相关文章

  1. vuex bug & vue computed setter

    vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...

  2. Vue(七):computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

  3. VueJS计算属性: computed

    computed属性 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. 渐进式 JavaScript 框架--Vue

      前  言   灵活 不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高效 20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化 1 计算属性 计算属性关键词: comp ...

  5. Swift语言精要 - 属性

    1. Stored Property eg: var number: Int = 0 2. Computed Property eg: var area : Double { get { return ...

  6. 相比之前其他几个入门的, 推荐: 简单vue2 入门教程

    注意:Vue.js 不支持 IE8 及其以下 IE 版本.       具体可以看下  http://www.runoob.com/vue2/vue-tutorial.html 以下是学习过程 Vue ...

  7. vue 初级小总结

    (1)插值,即渲染文本 文本:数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值 <h1>{{ message }}</h1> data() { return ...

  8. Vue.js:计算属性

    ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...

  9. Vue计算属性和监听属性

    一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...

随机推荐

  1. 【转载】Notepad++源码分析

    在网上发现了一个哥们写了关于Notepad++源码的文章,不过就写了一就没有了,我就接着他的工作再说说吧! 大三了,也写了一点儿程序了,但是如果只是按照自己的思路写下去恐怕难以提高,于是准备开始阅读一 ...

  2. (转) XSS Attacks – Exploiting XSS Filter

    中文翻译: from wooyun'drops 0x00 前言 这又是一篇来自全职赏金猎人Masato kinugawa的神作.一次双杀,用一篇报告拿下了两个CVE,分别是CVE-2015-6144和 ...

  3. linux 的21个命令:

    1:ls  [list] 2:输入输出重定向 3:| 管道 4:chmod 5:cd 6:mkdir 7:cp 8:rm 9:mv 10:cat 11:pwd 12:ln[link] 13:grep ...

  4. Java解析XML文件的方式

    在项目里,我们往往会把一些配置信息放到xml文件里,或者各部门间会通过xml文件来交换业务数据,所以有时候我们会遇到“解析xml文件”的需求.一般来讲,有基于DOM树和SAX的两种解析xml文件的方式 ...

  5. php编译完php.ini加载问题-Loaded Configuration File (none)

    编译安装php7时指定了--with-config-file-path=/usr/local/php7/etc,修改了 php.ini 的配置后重启,但就是不生效. 出现Loaded Configur ...

  6. React的环境搭建以及脚手架的安装

    1.安装node.js 如果安装了,就请参照第二步:没有的话,去node.js官网下载:https://nodejs.org/zh-cn/download/ 2.检查 win键+r -----> ...

  7. 简单的在jsp页面操作mysql

    ---恢复内容开始--- 上一篇讲了在DOS界面下操作mysql 现在我们来说说怎么在jsp页面中操作mysql 要用jsp页面操作mysql需要jdbc(不是非要jdbc,还有其他的) 下载地址:w ...

  8. excle 写入数据库

    龙龙博客:https://www.cnblogs.com/meilong/p/cao-zuoexcel-mo-kuaiopenpyxl.html 1 安装 pip install openpyxl 如 ...

  9. PYTHON经典算法-完美平方

    问题描述: 给定一个正整数n,找到若干个完全平方数(例如:1,4,9),使得 它们的和等于n,完全平方数的个数最少. 问题示例: 给出n=12,返回3,因为12=4+4+4:给出n=13,返回2,因为 ...

  10. HDU-2647 Reward(链式前向星+拓扑排序)

    Reward Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...