vue中计算属性中的set和get
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<p>初始值：{{name}}</p>
<p>翻转值：{{reverseStr()}}</p>
<p>计算属性翻转值：{{reverse}}</p>
<button @click="setSeverseStr()">点击调用set方法</button>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
let vm=new Vue({
el:'#app',
data:{
name:'Rose Jack',
firstName:'小',
lastName:'明'
},
methods:{
reverseStr(){
return this.name.split(' ').reverse().join(' ');
},
setSeverseStr(){
this.reverse='xiao ming';
}
},
//计算属性
computed:{
reverse:{
//get方法
get(){
//return this.name.split(' ').reverse().join(' ');
return this.firstName+' '+this.lastName;
},
//set方法
set(str){
let nameArr=str.split(' ');
this.firstName=nameArr[];
this.lastName=nameArr[];
alert(this.firstName);
alert(this.lastName);
}
}
}
})
</script>
</body>
点击之后：
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
vue中计算属性中的set和get的更多相关文章
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue生命周期以及vue的计算属性
一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- vue的计算属性get和set
1.计算属性是用来存储数据,但具有以下几个特点: a.数据可以进行逻辑处理操作. b.对计算属性中的数据进行监视. 2.计算属性和普通属性的区别: a.计算属性是基于它的依赖进行更新的,只有在相关依赖 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
随机推荐
- python模块之shelve,xml,hashlib,configpaser
shelve shelve模块也是一种可以将数据序列化的模块 使用方法 1. open 2. 读写 3. close 特点:使用方法比较简单 提供一个文件名字就可以开始读写,读写的方法和字典一致;跨平 ...
- HDU-2511-汉诺塔 X
首先我们来求第m次移动的盘子号数,先列出当m比较小可以直接观察的前几项 m : 1.2.3.4.5.6.7.8.9.10 id : 1.2.1.3.1.2.1.4.1.2 很容易联想到树状数组的low ...
- LG_3457_[POI2007]POW-The Flood
题目描述 Description 你手头有一张该市的地图.这张地图是边长为 m∗n 的矩形,被划分为m∗n个1∗1的小正方形.对于每个小正方形,地图上已经标注了它的海拔高度以及它是否是该市的一个组成部 ...
- 中心极限定理|z分布|t分布|卡方分布
生物统计学 抽样分布:n个样本会得到n个统计量,将这n个统计量作为总体,该总体的分布即是抽样分布 根据辛钦大数定律,从一个非正态分布的总体中抽取的含量主n的样本,当n充分大时,样本平均数渐近服从正态分 ...
- SpringSecurity 如何提示错误
1.可以通过authentication-failure-url="/login.html?error=1" 前端接收参数,根据参数提示 错误 2.前端vue this.myNam ...
- Choway Blog
choway 2018-12-11 09:23:46 JavaJVM Java 虚拟机(JVM)在执行 Java 程序时会把它管理的内存划分为多个不同的数据区域.这些区域各有用途,以及创建和销毁的时间 ...
- Thomson Plaza里面的三家店以及水果大会
旅行应该是一个发现的过程,至少我是这么认为的.很多时候并不一定要到什么特别的地方,也可以感受到旅游的乐趣.我觉得只要能看到值得回味的东西就好了.而能回味的东西,往往是需要仔细地来品.像旅行社安排的那样 ...
- 用 20 行 python 代码实现人脸识别！
点击上方"Python编程与实战",选择"置顶公众号" 第一时间获取 Python 技术干货! 阅读文本大概需要 11分钟. 今天给大家介绍一个世界上最简洁的人 ...
- Git学习笔记（二） · 非典型性程序猿
远程库的使用 前面说到的都是git在本地的操作,那么实际协作开发过程中我们肯定是要有一个远程版本库作为项目的核心版本库,也就是投入生产使用的版本.这里我们以 Github为例.Github是一个开放的 ...
- Redis 机器内核参数优化
" > /proc/sys/vm/overcommit_memory echo never > /sys/kernel/mm/transparent_hugepage/enabl ...