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. 测试必备之Java知识(一)—— Java基础

    Java基础 Java如何运行的? 开发的java源代码,通过javac编译成为平台无关的字节码文件(class),然后通过JVM的解释器将字节码解释成对应的机器码 “一次编译,到处运行”的理解 说的 ...

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

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

  3. AVR单片机教程——蜂鸣器

    本文隶属于AVR单片机教程系列.   引子 定时/计数器(简称定时器)是单片机编程中至关重要的一部分,再简单的单片机也会带有定时器. 也许你会觉得我们已经在delay函数中接触过定时器了,然而并不是, ...

  4. 保存数据到txt

    join用的不错 a = "Hello, world" b = "你好,世界" c = "How are you?" with open(f ...

  5. Zero down time upgrade with OGG -from 11g to 12c.

    High level steps upgrade from 11g to 12c database: 1)    Check network between source and target. 2) ...

  6. WeihanLi.Npoi 根据模板导出Excel

    WeihanLi.Npoi 根据模板导出Excel Intro 原来的导出方式比较适用于比较简单的导出,每一条数据在一行,数据列虽然自定义程度比较高,如果要一条数据对应多行就做不到了,于是就想支持根据 ...

  7. windows命令行(终端)怎么复制粘贴

    原文地址:https://jingyan.baidu.com/article/335530daf96f3a19cb41c3f4.html 终端打开后,我们可以简单的ping一下,查看一下连接地址   ...

  8. Python Selenium定位元素常用解决办法

       在做web应用的自动化测试时,定位元素是必不可少的,这个过程经常会碰到定位不到元素的情况(报selenium.common.exceptions.NoSuchElementException), ...

  9. Python学习初级python3.6的安装配置

    首先我们来安装python 1.首先进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downloads/),进入之后如下图,选择图中红色圈中区域进行下载. 2. ...

  10. Maven的scope属性作用域范围

    在POM 4中,<dependency>中还引入了<scope>,它主要管理依赖的部署.目前<scope>可以使用5个值: 1. compile,缺省值,适用于所有 ...