vue.js的computed,filter,get,set的用法及区别详解


Posted in Javascript onMarch 08, 2018

1、vue.js的computed方法:

处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值。用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods。

实例1:computed和methods实现翻转字符串

<template>
 <div>
 <input v-model="message">
 <p>原始字符串: {{ message }}</p>
 <p>计算后反转字符串: {{ reversedMessage }}</p>
 <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
 </div>
</template>

<script>
export default {
 data () {
 return {
 message: 'Runoob123!'
 }
 },
 computed: {
 // 计算属性的 getter
 reversedMessage: function () {
 // `this` 指向 vm 实例
 return this.message.split('').reverse().join('')
 }
 },
 methods: {
 reversedMessage2: function () {
 return this.message.split('').reverse().join('')
 }
 }
}
</script>

执行结果:

vue.js的computed,filter,get,set的用法及区别详解

实例2:computed的get()和set()用法

<template>
 <div>
 	<select v-model="site">
 		<option value="Google http://www.google.com">Google http://www.google.com</option>
 		<option value="baidu http://www.baidu.co">baidu http://www.baidu.com</option>
 		<option value="网易 http://www.163.com">网易 http://www.163.com</option>
 	</select>
 	<p>name:{{name}}</p>
 	<p>url:{{url}}</p>
 </div>
</template>

<script>
export default {
 data () {
 return {
 name: 'Google',
 url: 'http://www.google.com'
 }
 },
 computed: {
 site: {
 // getter
 get: function () {
 return this.name + ' ' + this.url
 },
 // setter
 set: function (newValue) {
 let names = newValue.split(' ')
 this.name = names[0]
 this.url = names[names.length - 1]
 }
 }
 }
}
</script>

执行结果:

vue.js的computed,filter,get,set的用法及区别详解

2、vue.js的过滤器fliter方法:

过滤器是将返回数据进行处理后返回处理结果的简单函数。可是在vue2.0版本被去掉了,替代方法是将函数写在methods里。

实例:

<template>
 <div>
 <input v-model="filterText"/>
 <ul>
 <li v-for="item in obj">
 <span>{{myfilter(item.label)}}</span>
 </li>
 </ul>
 </div>
</template>

<script>
export default {
 data () {
 return {
 obj: [
 {value: 0, label: 'beijing'},
 {value: 1, label: 'shanghai'},
 {value: 2, label: 'guangdong'},
 {value: 3, label: 'zhejiang'},
 {value: 4, label: 'jiangshu'}
 ],
 filterText: ''
 }
 },
 methods: {
 myfilter (value) {
 if (value.indexOf(this.filterText) > -1) {
 return value
 }
 }
 }
}
</script>

执行结果:

vue.js的computed,filter,get,set的用法及区别详解

3、vue.js的get和set方法:

vue中data属性能够响应数据变化内部是将data 的属性转换为 getter/setter,在vue2.0中,get()和set()用于computed计算属性中,在上面的computed实例中已有涉及。另外从vue1.0中继承的vm.$set( object, key, value )用于动态监控数据元素,在实例创建后添加数组属性并且有响应可用该方法实现。

<template>
 <div>
 <input v-model="opt" @blur="add()"/>
 <ul>
 <li v-for="item in arr">
 {{ item }}
 </li>
 </ul>
 </div>
</template>

<script>
export default {
 data () {
 return {
 arr: [ '北京', '上海', '广东', '深圳' ],
 opt: ''
 }
 },
 methods: {
 add () {
 this.$set(this.arr, this.arr.length, this.opt)
 }
 }
}
</script>

执行结果:

vue.js的computed,filter,get,set的用法及区别详解

以上这篇vue.js的computed,filter,get,set的用法及区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html下载本地
Jun 19 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 #Javascript
layui select动态添加option的实例
Mar 07 #Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 #Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 #Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 #Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 #Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 #Javascript
You might like
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
项目开发计划书
2014/01/09 职场文书
高中军训感言600字
2014/03/11 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
高三毕业感言
2015/07/30 职场文书