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 ...
随机推荐
- Java.前端模板.Thymleaf
1. Input 日期格式化 <input id="renewalDate" name="renewalDate" th:value="${#d ...
- Spring MVC中的拦截器Interceptor
谈谈spring中的拦截器 在web开发中,拦截器是经常用到的功能.它可以帮我们验证是否登陆.预先设置数据以及统计方法的执行效率等等.今天就来详细的谈一下spring中的拦截器.spring中拦截器主 ...
- [bzoj4571] [loj#2016] [Scoi2016] 美味
Description 一家餐厅有 \(n\) 道菜,编号 \(1\)...\(n\) ,大家对第 \(i\) 道菜的评价值为 \(ai\)( \(1 \leq i \leq n\) ).有 \(m\ ...
- python条件与循环-条件
1.条件和循环 主要讨论:if.while.for以及相关的搭配else.elif.break.continue和pass语句. 1.1 if语句 if语句由三部分组成:关键字本身.用于判断结果真假的 ...
- git reset --hard HEAD^ 在cmd中执行报错
报错: D:\git-root\test>git reset --hard HEAD^ More? More? fatal: ambiguous argument 'HEAD ': unknow ...
- JS-01-js的三种引入方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Pycharm运行/调试程序说明
1.字体调整(optional) File -> Settings ->Editor->Colors & Fonts -> Size 22 2.打开程序所在文件夹hw5 ...
- 关于selenium自动化元素定位问题解决的几种方法
遇到了元素定位问题和定位到后无法执行点击操作等,闲话少说,直奔主题: 1.元素定位不到一般有如下3种情况,大家如果遇到了可以对号入座哈 a.查找的元素不在当前窗口中 解决方法:使用driver.swi ...
- Spring boot 学习中代码遇到的几个问题
1.报一大段红错 此时对象还是能创建成功的,解决方案参考链接https://blog.csdn.net/wanglin199709/article/details/99121487 2.无法创建对象 ...
- acwing 243. 一个简单的整数问题2 树状数组 线段树
地址 https://www.acwing.com/problem/content/description/244/ 给定一个长度为N的数列A,以及M条指令,每条指令可能是以下两种之一: 1.“C l ...