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开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
随机推荐
- SpringMVC中Interceptor和Filter区别
Interceptor 主要作用:拦截用户请求,进行处理,比如判断用户登录情况,权限验证,主要针对Action请求进行处理.是通过HandlerInterceptor 实现的. 配置如下: <m ...
- CDC与HDC的区别以及相互转换
CDC是MFC的DC的一个类 HDC是DC的句柄,API中的一个类似指针的数据类型. MFC类的前缀都是C开头的 H开头的大多数是句柄 这是为了助记,是编程读\写代码的好的习惯. CDC中所 ...
- 红杉资本的Dropbox上市，国内哪些产品会跟着受益？
每一个估值达到10亿美元以上的互联网.科技独角兽企业,都将上市当做"终极荣光".但事实上,上市只是这些独角兽企业开启全新时代的开端而已.很多气势汹汹且看似前景一片光明的独角兽 ...
- leetcode笔记——35.搜索插入位置 - CrowFea
0.问题描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 12 输入: [1,3 ...
- 数据库事务(Transaction)
事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit). 事务四大特性(ACID): 原子性(Atomicity):个事务是一个不可分割的工作单位,事务中包括的 ...
- python Post 登录 cookies 和session
def post_name(): print('\npost name') # http://pythonscraping.com/pages/files/form.html data = {'fir ...
- 彪悍的Surface Book2发布：能重拾笔记本行业的信心吗？
Book2发布:能重拾笔记本行业的信心吗?" title="彪悍的Surface Book2发布:能重拾笔记本行业的信心吗?"> 在智能手机全面普及之后, ...
- 传智播客学习之Android运行原理 （转）
传智播客学习之Android运行原理 (2010-03-20 22:45:15) 转载▼ 今天终于忙里偷闲,和大家探讨一下android技术,第一次听到3G应该追溯到大学三年级的时候了,记得当时现代通 ...
- 时尚起义开源话题微博系统 v.0.4.5 上传漏洞
漏洞出现在/action/upload.php文件中 <?php /** ** **By QINIAO **/ !defined('QINIAO_ROOT') && exit(' ...
- Spring Boot 2.x基础教程：使用 ECharts 绘制各种华丽的数据图表
上一节我们介绍了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础.接下来,我们介绍一下后端开发经常会遇到的一个场景:可视化图表. 通常,这类需求在客户端应用中不太会用到 ...