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. go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用)

    目录 go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用) warden direct demo-server gr ...

  2. ASP .Net Core MVC如何利用vue提交包含List属性的form表单

    前言 遇到这个问题,是由于自己在mvc项目中使用vue而并不想jquery(人嘛,就是要折腾),并且表单中的一个属性是一个集合. 研究了下Razor如何实现的,用jquery感觉就挺麻烦了,vue用在 ...

  3. Django项目运行

    1.图像界面 2.配置ip和端口 2.命令行 python manage.py runserver ip:端口号 ip:端口号可以不写,为默认 也可以只修改端口号

  4. Spring Cloud学习之-什么是Spring Cloud?

    SpringCloud 什么是微服务? 要想学习微服务,首先需要知道什么是微服务?为什么会有微服务?相信看完架构的发展史读者就会明白 架构发展史 单体应用架构 如图所示:将所有的模块,所有内容(页面. ...

  5. JAVA WebSocket 使用时需要注意的地方

    最近在做一个项目,需要用WebSocket与另外一个平台建立通讯,来获取项目业务需要的实时数据,因此项目一启动,后台就要与另外一个平台建立WebSocket连接并且要保证他们的之间有且只有一条持续畅通 ...

  6. [CERC2016]凸轮廓线

    题意 https://www.luogu.org/problem/P3680 思考 拆点即可. 注意精度. 代码 // luogu-judger-enable-o2 #include<bits/ ...

  7. React 解析/ 第二节 使用 Reac

    官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpa ...

  8. IO博客专栏

    1. IO概览 2. 字符流与字节流的区别

  9. .Net Core初识以及启动配置

    .net程序员为什么要学习.net core .Net Core 是.Net的未来,微软在19年 5月已经明确说明,未来只有.Net 5(=.NET Core vNext),.Net 5是.net c ...

  10. Unreal Engine 4 蓝图完全学习教程(二)—— 初步尝试

    本篇尝试使用蓝图.蓝图是使用专门的编辑器进行编程. Ⅰ.3类蓝图 ①关卡蓝图:前面提到过,关卡是指在UE中制成的游戏场景.关卡蓝图是用于制作当前游戏场景的程序.在UE中进行编程就是在创建关卡蓝图. ② ...