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 ...
随机推荐
- go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用)
目录 go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用) warden direct demo-server gr ...
- ASP .Net Core MVC如何利用vue提交包含List属性的form表单
前言 遇到这个问题,是由于自己在mvc项目中使用vue而并不想jquery(人嘛,就是要折腾),并且表单中的一个属性是一个集合. 研究了下Razor如何实现的,用jquery感觉就挺麻烦了,vue用在 ...
- Django项目运行
1.图像界面 2.配置ip和端口 2.命令行 python manage.py runserver ip:端口号 ip:端口号可以不写,为默认 也可以只修改端口号
- Spring Cloud学习之-什么是Spring Cloud?
SpringCloud 什么是微服务? 要想学习微服务,首先需要知道什么是微服务?为什么会有微服务?相信看完架构的发展史读者就会明白 架构发展史 单体应用架构 如图所示:将所有的模块,所有内容(页面. ...
- JAVA WebSocket 使用时需要注意的地方
最近在做一个项目,需要用WebSocket与另外一个平台建立通讯,来获取项目业务需要的实时数据,因此项目一启动,后台就要与另外一个平台建立WebSocket连接并且要保证他们的之间有且只有一条持续畅通 ...
- [CERC2016]凸轮廓线
题意 https://www.luogu.org/problem/P3680 思考 拆点即可. 注意精度. 代码 // luogu-judger-enable-o2 #include<bits/ ...
- React 解析/ 第二节 使用 Reac
官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpa ...
- IO博客专栏
1. IO概览 2. 字符流与字节流的区别
- .Net Core初识以及启动配置
.net程序员为什么要学习.net core .Net Core 是.Net的未来,微软在19年 5月已经明确说明,未来只有.Net 5(=.NET Core vNext),.Net 5是.net c ...
- Unreal Engine 4 蓝图完全学习教程(二)—— 初步尝试
本篇尝试使用蓝图.蓝图是使用专门的编辑器进行编程. Ⅰ.3类蓝图 ①关卡蓝图:前面提到过,关卡是指在UE中制成的游戏场景.关卡蓝图是用于制作当前游戏场景的程序.在UE中进行编程就是在创建关卡蓝图. ② ...