Vue--使用watch、computed、filter方法来监控
watch与computed、filter：
watch:监控已有属性，一旦属性发生了改变就去自动调用对应的方法
computed:监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法
filter:js中为我们提供的一个方法，用来帮助我们对数据进行筛选
watch与computed的区别:
1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性
2.watch不会缓存数据，每次打开页面都会重新加载一次，
但是computed如果之前进行过计算他会将计算的结果缓存，如果再次请求会从缓存中
得到数据（所以computed的性能比watch更好一些）
一.watch监控使用小例子
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.4.4.js"></script>
</head> <body>
<div id="app">
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
<span v-html="fullname"></span>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
firstname:"",
lastname:"",
fullname:""
},
// 实时监控firstname,lastname,一旦其中优质发生了改变就需要重新设置fullname的值
// 可以使用watch来实现这个功能
watch:{
// 将来只要firstname发生了改变它就会触发后面的这个方法
"firstname":function(){
//只要firstname改变就应该相应的改变fullname
this.fullname = this.firstname+this.lastname;
},
"lastname":function(){
//只要lastname改变就应该相应的改变fullname
this.fullname = this.firstname+this.lastname;
}
}
}); </script> </html>
二.使用computed来监控
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.4.4.js"></script>
</head> <body>
<div id="app">
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
{{fullName}}
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
firstname:"小",
lastname:"追命",
},
computed:{
fullName:function() {
return this.firstname+this.lastname ;
}
}
});
</script>
</html>
三.使用filter方法来筛选元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.4.4.js"></script>
</head>
<body> </body>
<script>
/**
filter:作用：过滤元素
操作:会遍历数据集合，去匹配所有的数据，将所有匹配成功的数据返回为一个新的数组
var newList = list.filter(function(item){
return 匹配的条件;
如果里面的item满足匹配条件就会返回true，那么这个filter方法也会将对应的item值
返回给新的数组
});
*/
var arr = [
{name:"abc",age:18},
{name:"hc",age:18},
{name:"dbc",age:16},
{name:"ayy",age:14},
];
var str = "c";
var newArr = arr.filter(function(item){
// 查找newArr中所有name包含c的数据，然后返回
return item.name.indexOf(str) != -1;
});
console.log(newArr);
</script>
</html>
四.使用filter方法完成品牌管理的搜索功能例子
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="vue2.4.4.js"></script>
<title>Document</title>
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head> <body>
<div id="app">
<div class="add">
编号: <input id="id" v-color="color" v-focus type="text" v-model="id">品牌名称: <input v-model="name" type="text">
<button @click="add">添加</button>
</div>
<div class="add">品牌名称：<input v-model="searchValue" type="text"></div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!--加入: key="index" 时候必须把所有参数写完整 -->
<tr v-for="(item,key,index) in newList" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFrm("/")}}</td>
<!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div> </div>
</body> </html> <script>
// 使用全局过滤器（公有过滤器）
Vue.filter("dateFrm", function (time,spliceStr) {
// return "2017-11-16";
var date = new Date(time);
//得到年
var year = date.getFullYear();
// 得到月
var month = date.getMonth() + 1;
// 得到日
var day = date.getDate();
return year + spliceStr + month + spliceStr + day;
});
// 先将自定义指令定义好
// directive有两个参数
//参数一： 自定义指令 v-focus
//参数二： 对象，对象中可以添加很多方法
// 添加一个inserted方法:而这个方法中又有两个参数：
//参数一:el 当前使用自定义指令的对象
//参数二：obj 是指它(v-color="color" )后面设置的表达式
//{expression:"color",value:"red",}
Vue.directive("focus", {
inserted: function (el, obj) {
// console.log(el);
el.focus();
}
});
Vue.directive("color", {
inserted: function (el, obj) {
el.style.color = obj.value;
console.log(obj.value);
}
}); var vm = new Vue({
el: "#app",
data: {
searchValue:"",
color: "green",
id: 0,
name: '',
list: [
{ "id": 1, "name": "it", "ctime": Date() },
{ "id": 2, "name": "白狼", "ctime": Date() }
]
},
// mounted(){
// this.getFocus()
// },
computed:{
newList:function(){
if(this.searchValue =="") {
return this.list;
}
//改变this的指向
_this = this;
return this.list.filter(function(item){
return item.name.indexOf(_this.searchValue)!=-1;
});
}
},
methods: {
add: function () {
//将id和namepush到list数组中
this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
},
del: function (id) { // 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，
var index = this.list.findIndex(function (item) {
//根据item中的id属性来判断这个item是否是上面id中
//对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
return item.id == id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
});
// 根据下标在list集合中将对应的数据删除
// splice(开始删除的下标，删除的长度)
this.list.splice(index, 1);
} }
}); </script>
Vue--使用watch、computed、filter方法来监控的更多相关文章
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
- vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
- vue中methods,computed，filters,watch的总结
08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
- 基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
has(selector选择器或DOM元素) 将匹配元素集合根据选择器或DOM元素为条件,检索该条件在每个元素的后代中是否存在,将符合条件的的元素构成新的结果集. 下面举一个例子: <ul& ...
- 数组map()方法和filter()方法及字符串startsWith(anotherString)和endsWith(anotherString)方法
map方法的作用不难理解,"映射"嘛,也就是原数组被"映射"成对应新数组 var newArr = arr.map(function() {});例子: var ...
随机推荐
- 关于mybatis对实体类参数绑定参数的问题
dao层的代码: public interface SupplierMapper extends BaseMapper<SupplierDbo>{ /*List<SupplierDb ...
- springcloud 使用RabbitMq
新建一个项目,三个module 分别为eureka-server,config-server,config-client, eureka-server 的pom.xml, <?xml versi ...
- 解决IDEA maven多模块打包问题
参考: https://www.jianshu.com/p/37c6688c4fcb https://blog.csdn.net/sjhuangx/article/details/71519066 h ...
- 编译安装Python3.6.1
系统:CentOS 7 Python: 3.6.1 去官方网站下载Python的源码包 然后准备开发环境和服务器平台开发 注意:python编译还依赖一个zlib-devel(本人第一次编译就因为不知 ...
- 洛谷P3745 [六省联考2017]期末考试
传送门 题解 //Achen #include<algorithm> #include<iostream> #include<cstring> #include&l ...
- 多表关联懒加载导致的org.hibernate.LazyInitializationException: could not initialize proxy - no Session
本来考虑的是懒加载,这样可以提高效率,不过由于时间紧急 把懒加载改为急加载临时解决 https://www.jianshu.com/p/89520964f458 自己管理session也可以 临时补丁 ...
- 洛谷P4244 [SHOI2008]仙人掌图 II
传送门 首先不考虑带环的仙人掌,如果只是一棵普通的树,可以通过dp求每棵子树中的最长链和次长链求树的直径. 那么如果dfs的时候遇到了环,应该用环上的两点挂着的最长链加上两点间的距离来更新树的直径,并 ...
- 利用Python覆盖图像的某一部分，即改变图形一块区域(Region)的RGBA值
原图如下: 改变过后的图如下: 查阅API写法如下: from PIL import Image from PIL import ImageDraw pilim = Image.open('1.jpg ...
- 2019-8-31-C#-程序集数量对软件启动性能的影响
title author date CreateTime categories C# 程序集数量对软件启动性能的影响 lindexi 2019-08-31 16:55:58 +0800 2018-10 ...
- Django项目：CRM(客户关系管理系统)--35--27PerfectCRM实现King_admin编辑复选框
#admin.py # ————————01PerfectCRM基本配置ADMIN———————— from django.contrib import admin # Register your m ...