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 ...
随机推荐
- 关于为element Tree组件实现仿文件夹效果及右键菜单
<template> <div class="custom-tree-container" @contextmenu.native="handlePas ...
- Wine运行问题 希沃-汉字卡无法显示
在wine环境下运行希沃白板5,汉字卡无法正常显示: 这个模块是我之前参与开发的模块,过了5年还有点印象. 大概原理是获取字体库中字符的笔画路径GraphicsPath,根据里面的路径点集PathPo ...
- MAUI开发Android程序使PDA扫码广播消息转发至Web页面
前言 公司系统的手持终端(PDA)是用的Vue写的前端代码 在PDA上用浏览器直接打开Web页面 PDA扫码的时候,输出模式直接用模拟键盘按键的方式输出 这样在Web页面上,如果一个输入框在当前有焦点 ...
- 音视频八股文（8）-- h264 AnnexB
NALU(Network Abstract Layer Unit) ⾳视频编码在流媒体和⽹络领域占有重要地位:流媒体编解码流程⼤致如下图所示: H264简介 H.264从1999年开始,到2003年形 ...
- 2023-03-08：x265的视频编码器，不用ffmpeg，用libx265.dll也行。请用go语言调用libx265.dll，将yuv文件编码成h265文件。
2023-03-08:x265的视频编码器,不用ffmpeg,用libx265.dll也行.请用go语言调用libx265.dll,将yuv文件编码成h265文件. 答案2023-03-08: 使用 ...
- ET框架6.0分析二、异步编程
概述 ET框架很多地方都用到了异步,例如资源加载.AI.Actor模型等等.ET框架对C#的异步操作进行了一定程度的封装和改造,有一些特点: 显式的或者说强调了使用C#异步实现协程机制(其实C#的异步 ...
- C#中BitConverter.ToUInt16、BitConverter.ToUInt32原理与用法详解
一.基础知识 a.1字节=8位(1Byte=8bit) 二进制表示:11111111 十进制表示:255 计算机内部约定用多少字节来规范数值,比如红绿蓝三色在计算机中只分配了一个字节,一个字节 ...
- Linux 文件系统inode号和备份恢复
目录 一.inode原理 二.时间类型 三.inode号管理 四.inode实验 五.备份恢复 七.备份实验 一.inode原理 inode只有一个,唯一的,一个文件必须占用一个inode号,但是至少 ...
- 有关ODOO的ORM操作
1.查询操作 sale_id = self.env['sale.order'].search([]) env将对象实例化,search进行搜索,可以根据需求添加搜索条件 search_count([] ...
- javascript5 定时器功能
定时器功能: 定时器功能是window对象方法,涉及到 定时器和延时器,具体 看代码 定时器 timer=setInterval(function (){},300) 清除定时器: clearInte ...