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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 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两种快速排序算法实例
2015/02/15 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
python查看微信好友是否删除自己
2016/12/19 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
table不让td文字溢出操作方法
2022/12/24 HTML / CSS