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. 由Kaggle竞赛wiki文章流量预测引发的pandas内存优化过程分享

    pandas内存优化分享 缘由 最近在做Kaggle上的wiki文章流量预测项目,这里由于个人电脑配置问题,我一直都是用的Kaggle的kernel,但是我们知道kernel的内存限制是16G,如下: ...

  2. 华为,小米部分机型微信浏览器rem不适配的解决方案

    针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的rem不能正确填充满的问题,有如下解决方案 目前来看,产生这个情况的原因是因为给html附font-size时,附上的fon ...

  3. Docker学习(三)认识Docker和常用命令

    Docker学习(三)认识Docker和常用命令 Docker体系结构 docker服务端,作为服务的提供方,核心进程 docker daemon,所有docker命令都是通过这个进程完成的 REST ...

  4. [bzoj1070] [洛谷P2053] [SCOI2007] 修车

    Description 同一时刻有N位车主带着他们的爱车来到了汽车维修中心.维修中心共有M位技术人员,不同的技术人员对不同 的车进行维修所用的时间是不同的.现在需要安排这M位技术人员所维修的车及顺序, ...

  5. .NET Core Install for Ubuntu 14.04

      Add the dotnet apt-get feed In order to install .NET Core on Ubuntu or Linux Mint, you need to fir ...

  6. CQBZOJ 【重庆市NOIP模拟赛】避难向导

    题目描述 "特大新闻,特大新闻!全国爆发了一种极其可怕的病毒,已经开始在各个城市 中传播开来!全国陷入了巨大的危机!大量居民陷入恐慌,想要逃到其它城市以 避难!经调查显示,该病毒来自于C 市 ...

  7. 分布式缓存Redis的持久化方式RDB和AOF

    一.前言 Redis支持两种方式的持久化,RDB和AOF.RDB会根据指定的规则“定时”将内存中的数据存储到硬盘上,AOF会在每次执行命令后将命令本身记录下来.两种持久化方式可以单独使用其中一种,但更 ...

  8. python返回值内取出某一段数据的方法

    面讲的方法只适用于返回值长度固定的内容,长度不固定,每次取得值就不会一样 比如,我们需要取出“提取码: y3rx ”“:”后面的“y3rx” 目标数据在内容的第5位到第9位,做左侧为第1位,冒号后面有 ...

  9. mysql 常用sql操作总结

    批量修改表的引擎,从MyISAM修改为InnoDB 生成执行语句: select CONCAT('alter table ',table_name,' engine=InnoDB;') FROM in ...

  10. [CF 487C Prefix Product Sequence]

    题意 将1~n的正整数重排列,使得它的前缀积在模n下形成0~n-1的排列,构造解或说明无解.n≤1E5. 思考 小范围内搜索解,发现n=1,n=4和n为质数时有解. 不难发现,n一定会放在最后,否则会 ...