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 ...
随机推荐
- Docker系列(十五)：Openshift 简介
1.简单了解openshift相关组件 1.openshift是基于容器技术构建的一个云平台 2.kubernetes是容器编排组件 3.docker是容器引擎驱动组件 4.openshift在Pas ...
- PAT甲级题目1-10(C++)
1001 A+B Format(20分) Calculate a+b and output the sum in standard format -- that is, the digits must ...
- JspServlet
初始化servlet时,选用的配置类: config.getInitParameter("engineOptionsClass")?(System.getSecurityManag ...
- Luogu P2101 命运石之门的选择(分治+搜索)
P2101 命运石之门的选择 题意 题目描述 在某一条不知名世界线的冈伦今天突然接到了一条\(dmail\),上面说世界线将会发生巨大变动,未来的他无论如何都无法扭转这种变动回到原来的世界线.而世界线 ...
- 【心无旁骛】vuex-typescript-example
我不惮以最大的赞美去赞美这样的项目,真的是非常有创意又有能力. 先放上我喜欢的这个项目的开源地址:https://github.com/gluons/vuex-typescript-example 我 ...
- [转]MEF程序设计指南
<MEF程序设计指南>博文汇总 在MEF之前,人们已经提出了许多依赖注入框架来解决应用的扩展性问题,比如OSGI 实现以Spring 等等.在 Microsoft 的平台上,.NET Fr ...
- Java 容易疑惑的一些杂记录
1 final.finally和finalize final 是一个关键字 ,final 修饰 对象不能被修改,final 修饰的方法不能被重写,final 修饰的 类 不能被继承. finally ...
- OpenCASCADE动画功能
OpenCASCADE动画功能 eryar@163.com 1.Introduction OpenCASCADE提供了类AIS_Animation等来实现简单的动画功能. 从其类图可以看出,动画功能有 ...
- [转载] OpenCV2.4.3 CheatSheet学习（二）
二.矩阵操作(拷贝.洗牌.局部访问): src.copyTo(dst) 把src矩阵中的数据拷贝到dst. src.convertTo(dst, type,scale, shift) 缩放并转换到另外 ...
- 第三方博客同步xmlrpc、rest、API等相关的文章网址记录
http://answers.microsoft.com/en-us/windowslive/forum/writer-wlsettings/i-am-encountering-a-problem-s ...