vue 计算属性的setter getter
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<div>
{{fullName}}
{{age}}
</div>
</div> <!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Tom',
lastName: 'Lee',
age: '33'
},
computed: {
fullName: {
get: function() {
return this.firstName + " " + this.lastName;
},
set: function(value) {
var arr = value.split(' ');
this.firstName = arr[0];
this.lastName = arr[1]; }
} }
})
</script>
</body>
</html>
set得到值后可以改变data的值
vue 计算属性的setter getter的更多相关文章
- 3-4 计算属性的setter和getter
Vue中的计算属性的setter和getter //如上,fullName这个方法在取这个数据的时候,会执行get中的方法:而在设置数据时,会执行set中的方法.其中set中有个参数(value),用 ...
- 初识Vue——计算属性和观察者
一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
- vue——计算属性和侦听器
一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...
- vue计算属性和观察者
1. 计算属性 模板内的表达式非常便利,但在模板中放入太多的逻辑会让模板过重且难以维护,所有就有了计算属性 例子: //html代码 <div id="example"> ...
- 七、vue计算属性
细节流程图 初始化 计算属性的初始化是发生在 Vue 实例初始化阶段的 initState 函数中,执行了 if (opts.computed) initComputed(vm, opts.compu ...
- vue 计算属性和监听器
一.计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rev ...
- vue 计算属性与侦听器
侦听器:顾名思义,就是用来监听数据变化用的.侦听器在vue实例中,定义变量watch来使用.监听新值newVal和旧值oldVal,具体使用方法如下: <!DOCTYPE html> &l ...
随机推荐
- java 逻辑运算符
/* 与(并且) && 全部是true 否则就是false 或(或者) ||至少有一个是true ,就是true 全部是false 才是faalse 非(取反) ! 本来是true,变 ...
- parse_str()函数怎么用？
php parse_str()函数 语法 parse_str()函数怎么用? php parse_str()函数表示将字符串解析成多个变量,语法是parse_str(string,array),如果未 ...
- POJ 2251 Dungeon Master（dfs）
Description You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is co ...
- 二叉树入门（洛谷P1305）
题目描述 输入一串完全二叉树,用遍历前序打出. 输入输出格式 输入格式: 第一行为二叉树的节点数n. 后面n行,每一个字母为节点,后两个字母分别为其左右儿子. 空节点用*表示 输出格式: 前序排列的完 ...
- CDN技术之--内容缓存工作原理
有CDN前的网站服务技术–硬件扩展:高成本,灵活性和可扩展性比较差–镜像技术(mirroring):镜像服务器安装有一个可以进行自动远程备份的软件,每隔一定时间,各个镜像服务器就会到网站的源服务器上去 ...
- javascript 对象的设计模式
1.为什么学习设计模式:http://www.iteye.com/news/32092 或 https://blog.csdn.net/pigpigpig4587/article/details ...
- Sqli labs系列-less-5&6 报错注入法（上）
在我一系列常规的测试后发现,第五关和第六关,是属于报错注入的关卡,两关的区别是一个是单引号一个是双引号...当然我是看了源码的.... 基于报错注入的方法,我早就忘的差不多了,,,我记的我最后一次基于 ...
- 【数据库】一篇文章搞掂：SQL Server数据库
问题: 1.同一段代码,在存储过程中运行比普通SQL执行速度慢几十倍 原理: 在SQL Server中有一个叫做 “Parameter sniffing”参数嗅探的特性.SQL Server在存储过程 ...
- 【SQL】链接服务器
最近做项目,需要对两个数据库进行同步操作,所以采用在Server SQL中建立链接服务器方式实现. 链接服务器,可以直接访问/操作其他服务器上的数据库表. 1.连接SQL Server链接服务器 EX ...
- postgis常用的函数
常见函数:http://postgis.net/docs/reference.html ST_GeometryType(geometry) —— 返回几何图形的类型 ST_NDims(ge ...