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 ...
随机推荐
- Spring MVC(九)--控制器接受对象列表参数
前一篇文章介绍是传递一个参数列表,列表中的元素为基本类型,其实有时候需要传递多个同一类型的对象,测试也可以使用列表,只是列表中的元素为对象类型. 我模拟的场景是:通过页面按钮触发传递参数的请求,为了简 ...
- day 42 03--CSS布局设置
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 ...
- python3-常用模块之序列化
序列化 : 把其他的数据类型转换成 字符串或者bytes 序列 : 列表.元组.字符串.bytes 为什么要把其他数据类型转换成字符串? 能够在网络上传输的只能是bytes,能够存储在文件里的只有by ...
- HttpException (0x80004005): 无法连接到 SQL Server 会话数据库
ASP.NET 项目运行时出现错误提示:[HttpException (0x80004005): 无法连接到 SQL Server 会话数据库.] ,后排查问题发现是由于项目的Session模式是使用 ...
- vue 报错：Cannot read property '_wrapper' of undefined
我的情况是@click="xx" ,而xx函数未定义
- Tornado Demo1---webspider分析
Demo源码地址 https://github.com/CHUNL09/tornado/tree/master/demos/webspider 这个Demo的作用是用来获取特定URL的网页中的链接(链 ...
- 订单风险系统BI
最近被公司叫去协助传统做维表查询服务,项目已经做完.和前端联调过程发现oracle对查询 sql和产品设计还是挺重要的.不能全部堆给代码去做,如何方便代码,代码优化到最高性能才是首要解决的事,前端才能 ...
- 转载https://www.luogu.org/problemnew/solution/P1665，http://bailian.openjudge.cn/practice/2002/的新解法
不知道为什么O(n^4)O(n4)的玄学方法能过,正解显然是O(n^2)O(n2)的,枚举对角线,然后算出另外两点判断存不存在. 关键就在怎么通过对角线算出另外两点的坐标. 先贴公式. int mid ...
- 如何在终端编译C++代码
C++语言从编写-->执行整个过程.一般来讲,开发一个C++程序需要经过以下几步1. 编写代码,2. 编译器进行编译,compile 生成.o的可执行的二进制目标文件3. 连接器进行连接. ...
- C/C++编译的程序内存组成：
#include int main(){int a[1000000];//局部变量return 0;}编译运行后发现溢出错误.#include int a[1000000];//全局变量int mai ...