计算属性是为了让页面显示更加简洁，基于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的计算属性和侦听器的更多相关文章

  1. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

  2. vue基础——计算属性和侦听器

    计算属性——介绍 模板内的表达式非常便利,但是设计他们的初衷是用于简单计算的.在模板中放入太多的逻辑会让模板太过沉重切难以维护.如下: <div id="example"&g ...

  3. Vue的计算属性和侦听器

    1 计算属性:他是根据对象已有的属性计算出新的属性值.具有缓存的功能,如果原始属性不变,则用缓存.否则,重新计算. 前端 <form> <label>姓</label&g ...

  4. vue基础---计算属性和侦听器

    [一]计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  5. vue之计算属性和侦听器

    一.计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rev ...

  6. vue 之 计算属性和侦听器

    计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rever ...

  7. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  8. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  9. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  10. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. js中数组的sort() 方法

    sort()  方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串UniCode码.因为排序是按照字符串UniCode码的顺序进行排序的,所以首先应该把数组元素都转化成字符串(如有必要 ...

  2. python的format方法中文字符输出问题

    format方法的介绍 前言 提示:本文仅介绍format方法的使用和中文的输出向左右和居中输出问题 一.format方法的使用 format方法一般可以解决中文居中输出问题,假如我们设定宽度,当中文 ...

  3. Prism Sample 11-UsingDelegateCommands

    本例的知识点,全在ViewModel中,看代码: 1 public class MainWindowViewModel : BindableBase 2 { 3 private bool _isEna ...

  4. 2022-10-31：以下go语言代码输出什么？A：map[]；B：nil；C：Panic；D：编译错误。 package main import “fmt“ func main() {

    2022-10-31:以下go语言代码输出什么?A:map[]:B:nil:C:Panic:D:编译错误. package main import "fmt" func main( ...

  5. 2020-10-09：假如我能拿到别人的URL,然后篡改数据（金额）发送给系统，如何避免这种事情的发生？

    福哥答案2020-10-09:#福大大架构师每日一题# [此答案来自知乎:](https://www.zhihu.com/question/424764253) 这种敏感url一般都有安全机制的:1. ...

  6. 2021-03-10：一个数组上共有 N 个点，序号为0的点是起点位置，序号为N-1 的点是终点位置。现在需要依次的从 0 号点走到 N-1 号点。但是除了 0 号点和 N-1 号点，他可以在其余的 N-2 个位置中选出一个点，并直接将这个点忽略掉，问从起点到终点至少走多少距离？

    2021-03-10:一个数组上共有 N 个点,序号为0的点是起点位置,序号为N-1 的点是终点位置.现在需要依次的从 0 号点走到 N-1 号点.但是除了 0 号点和 N-1 号点,他可以在其余的 ...

  7. 2022-01-21：完美矩形。 给你一个数组 rectangles ，其中 rectangles[i] = [xi, yi, ai, bi] 表示一个坐标轴平行的矩形。这个矩形的左下顶点是 (xi,

    2022-01-21:完美矩形. 给你一个数组 rectangles ,其中 rectangles[i] = [xi, yi, ai, bi] 表示一个坐标轴平行的矩形.这个矩形的左下顶点是 (xi, ...

  8. lec-1-Deep Reinforcement Learning, Decision Making, and Control

    What is RL 基于学习的决策的数学形式 从经验中学习决策和控制的方法 Why should we study this now 深度神经网络特征方法 强化学习的提升 计算能力的提升 我们还需要 ...

  9. CF1825C LuoTianyi and the Show

    传送门(luogu) 传送门(CF) 前言 我来水题解力 简化题意 \(n\) 个人,\(m\) 个座位,每个人落座的方法有三种: 坐最左边的人的左边,没人的话就做 \(m\) 号座位,若最左边的为 ...

  10. BFF层聚合查询服务异步改造及治理实践 | 京东云技术团队

    首先感谢王晓老师的[接口优化的常见方案实战总结]一文总结,恰巧最近在对稳健理财BFF层聚合查询服务优化治理,针对文章内的串行改并行章节进行展开,分享下实践经验,主要涉及原同步改异步的过程.全异步化后衍 ...