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 ...
随机推荐
- Gateway同时使用断言跟过滤器查询数据库报了这个错误怎么解决？
DynamicServerListLoadBalancer for client shop-product-sentinel initialized: DynamicServerListLoadBal ...
- [C++项目] 通讯录管理系统
文章目录 通讯录管理系统 1.系统需求 2.创建项目 2.1 创建项目 2.2添加文件 3.菜单功能 4.退出功能 5.添加联系人 5.1 设计联系人结构体 5.2 设计通讯录结构体 5.3 main ...
- 使用Kepserver 自带 DataLogger 功能 实现工控数据转储关系型数据库
本文以 Mysql数据库为例,介绍使用 kepserver 的datalogger 功能转储数据到 mysql 第一步:下载安装 Mysql ODBC 数据库驱动前往 官网下载ODBC驱动https: ...
- 文心一言 VS chatgpt （2）-- 算法导论1.2
一.给出在应用层需要算法内容的应用的一个例子,并讨论涉及的算法的功能. 文心一言: 在应用层需要算法内容的应用的一个例子是无人机自主飞行控制.无人机自主飞行控制需要算法来确定无人机的位置.速度和方向, ...
- 2020-12-31：tcp三次握手，最后一次失败，网络会怎么样？
福哥答案2020-12-31:[答案来自此链接:](https://www.zhihu.com/question/437249958)第一次握手:建立连接时,客户端发送syn包(syn=a)到服务器, ...
- Spring原理（1）——容器
容器接口 BeanFactory 是ApplicationContext的父接口,所有ApplicationContext的实现都组合了BeanFactory. BeanFactory才是Spring ...
- Selenium - 元素操作(3) - 下拉框操作
Selenium - 元素操作 下拉框才做可以分为两类: select标签的下拉框:使用Select类进行操作: 非select标签的下拉框:一般是 ul,li, div 等标签组成,使用元素定位的方 ...
- IBM小型机 - 检测码：B150B10C，设备卡住不运行
检测码:B150B10C 问题 开机后,出现检测码:B150B10C,然后就卡在这里不动,无法进行下一步: 这里的错误码表示--机器的内存控制模块被deconfig(取消配置): 解决方法 登录cel ...
- Django4全栈进阶之路1 Django4下载与安装
python 下载安装: 下载网址:https://www.python.org/downloads/ 安装方法:https://www.cnblogs.com/beichengshiqiao/p/1 ...
- AcWing 423. 采药
辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师. 为此,他想拜附近最有威望的医师为师. 医师为了判断他的资质,给他出了一个难题. 医师把他带到一个到处都是草药的山洞里对他说:"孩子 ...