文档章节

Vue.js学习系列(二十九)-- 计算属性(三)

博为峰教研组
 博为峰教研组
发布于 2017/03/19 17:11
字数 188
阅读 11
收藏 0

3. computed setter

computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<p>{{site}}</p>

</div>

<script type="text/javascript">

 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[1]

      }

    }

  }

})

// 调用 setter, vm.name 和 vm.url 也会被对应更新

vm.site = '51code http://www.51code.com';

document.write('name: ' + vm.name);

document.write('<br>');

document.write('url: ' + vm.url);

</script>

 

</body>

</html>

运行结果:

从实例运行结果看在运行 vm.site = '51code http://www.51code.com'; 时,setter 就会被调用, 同时vm.name和 vm.url 也会被对应更新。

在使用计算属性computer,在必要时可以设置setter。

 

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿
2018/05/18
0
0
Vue源码阅读 - 依赖收集原理

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在下借这个机会从大家的文章和...

SHERlocked93
2018/07/09
0
0
深入理解Vue的watch实现原理及其实现方式

理解Vue中Watch的实现原理和方式之前,你需要深入的理解MVVM的实现原理,如果你还不是很理解,推荐你阅读我之前的几篇文章: 彻底搞懂Vue针对数组和双向绑定(MVVM)的处理方式 vue.js源码解读...

wangweianger
2018/05/14
0
0
【Vue 牛刀小试】:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

系列目录地址 一、基础知识概览 第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的使用(posted at 2018-11-02) ...

墨墨墨墨小宇
07/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

总结:TCP/IP协议

一、介绍 TCP协议属于OSI七层模型中的传输层协议,提供处于网络连接中的两台计算机之间的数据 传输。   在传输层有两个性质不同的协议:TCP(Transmission Control Protocol,传输控制协议...

浮躁的码农
7分钟前
1
0
一言不合就删库跑路?万名贡献者和阿里巴巴开源的二三事

9 月 27 日云栖大会,阿里巴巴宣布贾扬清担任开源技术委员会负责人。 有人问:开源是为了什么? 从个人视角看,可以证明自己的专业能力,获得行业认可; 从企业视角看,可以建立技术影响力,...

大涛学弟
17分钟前
2
0
JAVA编程注意事项(性能篇)

1. 尽量在合适的场合使用单例 使用单例可以缩短加载的时间,提高加载的效率,单例主要适用于以下三个方面: 第一,控制资源的使用,通过线程同步来控制资源的并发访问; 第二,控制实例的产生...

你好夜故事
19分钟前
2
0
List 前端 AngularJS JS 对IP排序

数据格式 $scope.dataList=[ {"ip":"192.168.10.10", "port":"8080",...}, { "ip":"192.168.10.12", "port":"8080",... } ,.....] 调用 $scope.ipSortForward($scope.dataList,"ip") 核心代码......

最菜最菜之小菜鸟
19分钟前
2
0
浅析Cassandra LeveledCompactionStrategy

前言 Cassandra是基于LSM架构的分布式数据库。LSM中有一个很重要的过程,就是压缩(Compaction)。默认的压缩策略是SizeTieredCompactionStrategy,今天主要说一下另一种压缩策略LeveledComp...

阿里云官方博客
23分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部