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 ...
随机推荐
- Mac + IOS + Safari 抓取网络请求
第一步:打开苹果手机 设置>Safari浏览器>高级>网页检查器 第二步:打开 Mac 上的Safari浏览器>偏好设置>高级>在菜单栏中显示"开发&qu ...
- ArcGIS Pro创建、发布、调用GP服务全过程示例（等高线分析）
在之前的文章介绍过使用ArcMap发布GP分析服务,由于ArcGIS后续不在更新ArcMap,改用ArcGIS Pro,本文对ArcGIS Pro发布GP分析服务进行说明. 本文以等高线分析为例,使用 ...
- Vue 前端开发团队风格指南（史上最全）
Vue官网的风格指南按照优先级(依次为必要.强烈推荐.推荐.谨慎使用)分类,本文根据项目实际情况整理了一份适用于团队开发的vue风格指南,供大家参考. 一.命名规范 常用的命名规范: camelCas ...
- latex-作业模板（自用，因为记不住语法55）
\documentclass[12pt, a4paper, oneside]{ctexart} \usepackage{amsmath, amsthm, amssymb, bm, graphicx, ...
- Django, urls的参数name的demo
Django的路由变化 遇到需要修改路由的需求,特别记录一下 项目开始 django-admin startproject sandboxOA. # 外部文件夹可以改变名字, '.'的意思是上一级不需 ...
- 雪球 app 实战（1）
开头 因为理论篇结束之后,需要一个实战,估选用了雪球app作为一个作业 业务场景: 雪球 app 自选设置(入口位于 行情 模块) 作业内容 使用 百度脑图 编写 思维导图 [自选设置]模块的测试用例 ...
- vue中让嵌入的iframe完美自适应宽度、高度
涉及到系统集成的时候,前端我们经常会用到iframe嵌入,但是嵌入的时候经常有不适应的情况,太长或太宽.滚动条... 下面的方法可以做到使嵌入的iframe自适应宽度.高度, 1.嵌入iframe,加 ...
- 深入 Hyperf：HTTP 服务启动时发生了什么？
当我们创建 Hyperf 项目之后,只需要在终端执行 php bin/hyperf.php start 启动命令,等上几秒钟,就可以看到终端输出的 Worker 进程已启动,HTTP 服务监听在 95 ...
- ps vs top：CPU占用率统计的两种不同方式
如何计算 CPU 占用率? 简单来说,进程的 CPU 占用率指的是 CPU 有多少时间花费在了运行进程上.在 Linux 系统里,进程运行的时间是以jiffies[1]统计的,通过计算jiffies ...
- 在EXCEL和WPS表格里实现邮件合并功能
在EXCEL和WPS表格里实现邮件合并功能 2020/3/21 22:06:09 0人评论 10635次 OFFICE邮件合并:在Office中,先建立两个文档:一个WORD包括所有文件共有内容的主文 ...