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 ...
随机推荐
- Python OOP之继承封装多态
面向对象的三大特征 继承 封装 多态 继承 子类可以使用父类定义的内容或者行为 继承的实现 父类,基类,超类,被继承的类,Base Class,Super Class 子类:有继承行为的类 所有类都必 ...
- 命令行编译和执行java代码
虽然现在IDE很强大又很智能,但是平常随意写点练手的代码的时候,直接在命令行中使用vim和java命令更为方便快捷,可以做到无鼠标纯键盘的操作. 首先保证将java相关指令添加到了环境变量中: 1.编 ...
- Finalshell
使用VMware可以得到Linux虚拟机,但是在VMware中操作Linux的命令行页面不太方便 1.内容的复制.粘贴跨越VMware不方便 2.文件的上传.下载跨越VMware不方便 3.也就是和L ...
- JavaWeb之day01html
目录: 1.html简介 - html的操作思想(*****) 2.文字标签和注释标签 3.标题标签.水平线标签和特殊字符 4.列表标签 5.图像标签(********) 6.路径介绍(相对路径*** ...
- 2023-04-17：设计一个包含一些单词的特殊词典，并能够通过前缀和后缀来检索单词。 实现 WordFilter 类： WordFilter(string[] words) 使用词典中的单词 wor
2023-04-17:设计一个包含一些单词的特殊词典,并能够通过前缀和后缀来检索单词. 实现 WordFilter 类: WordFilter(string[] words) 使用词典中的单词 wor ...
- 2022-10-15：给你一个整数数组 nums 和一个整数 k ，请你返回其中出现频率前 k 高的元素。 你可以按 任意顺序 返回答案。 要求时间复杂度O(N)。 输入: nums = [1,1,1
2022-10-15:给你一个整数数组 nums 和一个整数 k ,请你返回其中出现频率前 k 高的元素. 你可以按 任意顺序 返回答案. 要求时间复杂度O(N). 输入: nums = [1,1,1 ...
- 2022-01-05：有四种诗的韵律分别为: AABB、ABAB、ABBA、AAAA。 比如 : 1 1 3 3就属于AABB型的韵律、
2022-01-05:有四种诗的韵律分别为: AABB.ABAB.ABBA.AAAA. 比如 : 1 1 3 3就属于AABB型的韵律.6 6 6 6就属于AAAA型的韵律等等, 一个数组arr,当然 ...
- 2021-12-17：长城守卫军问题。 长城上有连成一排的n个烽火台，每个烽火台都有士兵驻守。 第i个烽火台驻守着ai个士兵，相邻峰火台的距离为1。另外，有m位将军， 每位将军可以驻守一个峰火台，每个
2021-12-17:长城守卫军问题. 长城上有连成一排的n个烽火台,每个烽火台都有士兵驻守. 第i个烽火台驻守着ai个士兵,相邻峰火台的距离为1.另外,有m位将军, 每位将军可以驻守一个峰火台,每个 ...
- 【熊子q的代码乐园】用python写个健康报备记录小系统
目录 一.前言 二.技术实现 1.概述 2. 环境 3. 技术核心 4. 数据库 5. 源代码 三.最后 一.前言 coding的一路上,遇到过许多问题,也写过一些代码去解决,回头看看还是有点意思的, ...
- 金三银四抢人季，HR 如何 3 招做到效率为王？
春招伊始,面对队伍庞大的校招人群,蜂拥而入的简历,HR 如何才能快速搞定呢?Bug君总结了一下过往招聘季的一些比较流行的环节: 通过线上宣讲,节省出行成本.时间,老板更认可了 现在大多数企业都会在直播 ...