computed setter
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的更多相关文章
- vuex bug & vue computed setter
vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...
- Vue(七):computed计算属性
简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...
- VueJS计算属性: computed
computed属性 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 渐进式 JavaScript 框架--Vue
前 言 灵活 不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高效 20kB min+gzip 运行大小超快虚拟 DOM 最省心的优化 1 计算属性 计算属性关键词: comp ...
- Swift语言精要 - 属性
1. Stored Property eg: var number: Int = 0 2. Computed Property eg: var area : Double { get { return ...
- 相比之前其他几个入门的, 推荐: 简单vue2 入门教程
注意:Vue.js 不支持 IE8 及其以下 IE 版本. 具体可以看下 http://www.runoob.com/vue2/vue-tutorial.html 以下是学习过程 Vue ...
- vue 初级小总结
(1)插值,即渲染文本 文本:数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值 <h1>{{ message }}</h1> data() { return ...
- Vue.js:计算属性
ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...
- Vue计算属性和监听属性
一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...
随机推荐
- __init__.py在导包中起到的作用
说明:__init__.py这个文件本人使用频率不高 例子: __init__.py文件作用:初始化这个包 1.v1.py def vi(): return 'views' 2.views->_ ...
- [LOJ#2017][轮廓线DP][KMP]「SCOI2016」围棋
题目传送门 看到 \(m\le 12\) 和 \(c\le 6\) ,容易想到状压 DP 考虑转化成 \(3^{nm}\) 减去不合法的方案数,轮廓线 DP :\(f[i][j][S][k][h]\) ...
- umake ide -h
umake ide -husage: umake ide [-h] {netbeans,idea,clion,eclipse,atom,idea-ultimate,ec ...
- 微服务的多数据源配置: step 1
spring boot + mybatis: 实现的功能点: 多数据源 jdbc: spring.datasource.test1.url = jdbc:mysql://localhost:3306/ ...
- URL方案最佳做法|高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼
使 URL整洁和人性化 GET(安全交互)和POST(不安全交互):选用正确的一个.
- 团队第一次作业(By七个小矮人)
一.团队简介 1.团队名称:七个小矮人 2.团队成员列表 201731024137 马驰(队长) 201731021227 于丁 201731024114 杨汶桐 201731024125 李朋珂 2 ...
- tf.keras遇见的坑:Output tensors to a Model must be the output of a TensorFlow `Layer`
经过网上查找,找到了问题所在:在使用keras编程模式是,中间插入了tf.reshape()方法便遇到此问题. 解决办法:对于遇到相同问题的任何人,可以使用keras的Lambda层来包装张量流操作, ...
- AI初探1
一个典型的机器学习的过程,首先给出一个输入数据,我们的算法会通过一系列的过程得到一个估计的函数,这个函数有能力对没有见过的新数据给出一个新的估计,也被称为构建一个模型.就如同上面的线性回归函数. 在机 ...
- windows系统中如何找到某程序运行的本地文件
主要通过window自带的服务功能来查询: 比如:
- obj2gltf安装详细教程
在线转换地址:http://52.4.31.236/convertmodel.html 在使用cesium的过程中需要使用到gltf模型,官方推荐使用obj2gltf插件将obj模型转换成gltf格式 ...