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 ...
随机推荐
- Java +支付宝 +接入
说下业务场景, 公司之前的支付宝业务是PHP对接的现在改成 Java ,在接入出现不同的问题.之前PHP用的是老的移动支付, 现在Java的新接口 , 需要签约. 跟运维沟通好几次, 说签约不了, 只 ...
- C#Image和Icon的相互转化
Image img = Image.FromHbitmap(icon.ToBitmap().GetHbitmap()); Graphics g = Graphics.FromImage(img); g ...
- Node中js获取异步操作的结果
js中要获取异步操作的结果必须使用回调函数 回调函数也被称为高阶函数,简单来说就是,函数作为一个参数传到另一个主函数里面,当那一个主函数执行完之后,再执行传进去的作为参数的函数 function fn ...
- CAS企业级单点登录原理
https://blog.csdn.net/anumbrella/article/details/80821486 1. 单点登录概述 1.1. 什么是单点登录? 单点登录:Single Sign O ...
- linux使用wget
wget is a Linux command-line utility for retrieving files from the web, via HTTP, HTTPS and FTP prot ...
- Luogu P1850 换教室(期望dp)
P1850 换教室 题意 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有\(2n\)节课程安排在\(n\)个时间段上.在第\(i(1\l ...
- Leetcode145. Binary Tree Postorder Traversal二叉树的后序遍历
给定一个二叉树,返回它的 后序 遍历. 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 递归: class Solution { public: vector<int> res; ve ...
- 02.Hibernate配置文件之映射配置文件
映射文件,即xxx.hbm.xml的配置文件 <class>标签:用来将类与数据库表建立映射关系 属性: name:类中的全路径 table:表名(如果类与表名一致,那么table属性可以 ...
- html常用标签详解3-a标签
a标签 1.a标签的属性 a标签属于行内元素标签,双标签<a></a> href:a标签的跳转地址 target:打开方式(_self自身:_blank:新窗口) title: ...
- 前端存取cookie
1.存cookie document.cookie="user_phone="+loginMake1Value;//存手机号码cookie//'user_phone'为cookie ...