2021-7-11 Vue的计算属性和侦听器
计算属性是为了让页面显示更加简洁，基于data数据进行处理的方法，以下为实例
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="" v-model="msg">
{{reverseMsg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用 var vm=new Vue({
el:'#app',
data:{
msg:''
},
computed:{
reverseMsg:function(){
return this.msg.split('').reverse().join('');//split分割，reverse反转，join拼接
}
}
});
</script>
</body>
</html>
计算属性和方法的区别：
计算属性是有缓存的，只要data数据不发生改变，会直接调用上次计算好的值（节省时间，节约性能）
方法则是没有缓存，不管data是否发生改变，都会重新执行一次方法
侦听器和计算属性有点类似，但是侦听器常用于异步或者开销较大的计算，以下为侦听器实例
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="" v-model="msg">
<input type="text" name="" v-model="msg1">
{{msg2}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用 var vm=new Vue({
el:'#app',
data:{
msg:'',
msg1:'',
msg2:''
},
watch:{
msg:function(val){
this.msg2=val+' '+this.msg1;
},
msg1:function(val){
this.msg2=this.msg+' '+val;
}
}
});
</script>
</body>
</html>
使用侦听器来模拟异步返回的效果
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="" v-model.lazy="msg">
{{tip}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用 var vm=new Vue({
el:'#app',
data:{
msg:'',
tip:''
},
methods:{
checkName:function(msg){
var that=this;
setTimeout(function(){
if (msg=='admin') {
that.tip='已存在';
}
else{
that.tip='成功';
}
},2000);
}
},
watch:{
msg:function(val){
this.checkName(val);//内部调用时记得加this
this.tip='正在验证';
}
}
});
</script>
</body>
</html>
2021-7-11 Vue的计算属性和侦听器的更多相关文章
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue基础——计算属性和侦听器
计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...
- Vue的计算属性和侦听器
1 计算属性:他是根据对象已有的属性计算出新的属性值.具有缓存的功能,如果原始属性不变,则用缓存.否则,重新计算. 前端 <form> <label>姓</label&g ...
- vue基础---计算属性和侦听器
[一]计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- vue之计算属性和侦听器
一.计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rev ...
- vue 之 计算属性和侦听器
计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rever ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Arnold置乱
一.Arnold置乱概述 Arnold变换是俄国数学家弗拉基米尔·阿诺德(Vladimir Igorevich Arnold)提出,Arnold将其应用在遍历理论研究中.由于Arnold本人最初对一张 ...
- 点&边双连通分量
双连通分量 参考博客:https://www.cnblogs.com/jiamian/p/11202189.html#_2 概念 双连通分量有点双连通分量和边双连通分量两种.若一个无向图中的去掉任意一 ...
- springcloud~Sentinel
介绍 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 是面向分布式.多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量路由.流量控制.流量整形.熔断降级.系统自适 ...
- mysql-高级功能(触发器、存储过程、视图、事务)
目录 触发器-created trigger 1.触发器分为六种情况 2.语法结构 3.创建触发器 4.查询/删除触发器 存储过程-created procedure 1.创建存储过程 2.使用存储过 ...
- js验证统一社会信用代码
js验证统一社会信用代码 //验证信用代码 function CheckSocialCreditCode(Code) { var patrn = /^[0-9A-Z]+$/; //18位校验及大写校验 ...
- Spring AOP 分享
初级篇 AOP是什么? Aspect-oriented Programming (AOP) 即面向切面编程.简单来说,AOP 是一种编程范式,允许我们模块化地定义横跨多个对象的行为.AOP 可以帮助我 ...
- 2023-04-14：n对情侣坐在连续排列的 2n 个座位上，想要牵到对方的手， 人和座位由一个整数数组 row 表示，其中 row[i] 是坐在第 i 个座位上的人的ID， 情侣们按顺序编号，第一对
2023-04-14:n对情侣坐在连续排列的 2n 个座位上,想要牵到对方的手, 人和座位由一个整数数组 row 表示,其中 row[i] 是坐在第 i 个座位上的人的ID, 情侣们按顺序编号,第一对 ...
- 2022-11-20：小团生日收到妈妈送的两个一模一样的数列作为礼物！ 他很开心的把玩，不过不小心没拿稳将数列摔坏了！ 现在他手上的两个数列分别为A和B，长度分别为n和m。 小团很想再次让这两个数列变
2022-11-20:小团生日收到妈妈送的两个一模一样的数列作为礼物! 他很开心的把玩,不过不小心没拿稳将数列摔坏了! 现在他手上的两个数列分别为A和B,长度分别为n和m. 小团很想再次让这两个数列变 ...
- 远程挂载 NFS 共享目录引发死机问题
集群的存储空间有限,把一些历史的归档数据放在了公司的另外一台老旧存储服务器上,并使用 NFS 把它挂载到了 log 节点.周末的时候机房空调故障,旧存储服务器挂掉了!周一上班,在集群登陆节点使用df ...
- 2023-06-10：给定一个由 n 个节点组成的网络，用 n x n 个邻接矩阵 graph 表示 在节点网络中，只有当 graph[i][j] = 1 时，节点 i 能够直接连接到另一个节点 j。
2023-06-10:给定一个由 n 个节点组成的网络,用 n x n 个邻接矩阵 graph 表示 在节点网络中,只有当 graph[i][j] = 1 时,节点 i 能够直接连接到另一个节点 j. ...