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 ...
随机推荐
- C#用API可以改程序名字
[DllImport("user32.dll", EntryPoint = "FindWindow")] public static extern int Fi ...
- nginx部署为HTTP代理支持CONNECT模式
有个软件要走http代理,想着部署nginx起来用,结果发现用不了: 而用ccproxy的话,一切正常: 抓包分析了下,是CONNECT模式的请求 从nginx的官网http://nginx.org/ ...
- bootstrap-select 插件示例
本文原创地址:http://www.cnblogs.com/landeanfen/p/7457283.html 一.组件开源地址以及API说明 bootstrap-select开源地址:https ...
- MacOS 读写 NTFS 即插即用.
1. 安装osxfusehttps://osxfuse.github.io/ 2. 安装brewhttps://brew.sh/index_zh-cn.html 3. 安装ntfs-3gbrew in ...
- 从github下载项目出现yes/no的选项，无法下载项目
解决办法: # 本地执行: ssh-keygen # 将id_rsa_pub文件中公钥拷贝到github上的ssh认证 oodful@:~/Volumes/Term2 :::$cat ~/.ssh/i ...
- BZOJ 3236 AHOI 2013 作业 莫队+树状数组
BZOJ 3236 AHOI 2013 作业 内存限制:512 MiB 时间限制:10000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目大意: 此时己是凌晨两点,刚刚做了Co ...
- dubbo入门学习(五)-----dubbo的高可用
zookeeper宕机与dubbo直连 现象 zookeeper注册中心宕机,还可以消费dubbo暴露的服务. 原因 健壮性 l 监控中心宕掉不影响使用,只是丢失部分采样数据 l 数据库宕掉后,注册中 ...
- Java虚拟机系列（四）---查看GC日志
这一节穿插一点如何在eclipse中配置并查看某个Java应用GC日志的知识点,我也是通过调研知道的,因为书中写的不是很详细,主要是为下一节做准备. 一.eclipse中配置GC 在eclipse中如 ...
- 左神算法书籍《程序员代码面试指南》——2_02在单链表和双链表中删除倒数第k个字节
[题目]分别实现两个函数,一个可以删除单链表中倒数第K个节点,另一个可以删除双链表中倒数第K个节点.[要求]如果链表长度为N,时间复杂度达到O(N),额外空间复杂度达到O(1).[题解]从头遍历链表, ...
- Docker学习入门
Docker简介: Docker 包括三个基本概念 镜像(Image) 容器(Container) 仓库(Repository) 理解了这三个概念,就理解了 Docker 的整个生命周期. Docke ...