下面是计算属性相关代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue3</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->

     <script src="vue.js"></script>

 </head>

 <body>

 <!--计算属性computed,可以用在一些复杂逻辑上-->

 <div id="app">

     <!--1.模板中逻辑过重，不易维护-->

     <p>{{msg.split('').reverse().join('')}}</p><br>

     <!--2.用上computed属性，适用于复杂逻辑-->

     <p>原值:{{msg}}</p>

     <p>使用computed:字符串反转后的值:{{reverseMsg}}</p><br>

     <!--3.用methods-->

     <p>原值:{{msg}}</p>

     <p>使用methods:字符串反转后的值:{{reverseMsg1()}}</p><br>

     <!--我们可以发现computed属性和methods得到的结果是一样的。但是computed是基于它的缓存依赖（例子中指vm.msg)，

     只有相关依赖改变才会重新取值；但是methods，每次重新渲染时，都会重新取值-->

     <!--所以说一般computed性能更好-->

     <!--计算属性默认只有getter,不过我们可以设置setter-->

     <p>{{fullName}}</p>

     <p>{{firstName}}</p>

     <p>{{lastName}}</p>

 </div>

 <script>

     var vm=new Vue({

         el: '#app',

         //选项对象

         data:{

             msg:'hello',

             firstName:'Smith',

             lastName: 'Lee'

         },

         //声明计算属性,提供的函数将用作vm.reverseMsg的getter

         //vm.reverseMsg依赖于vm.msg；vm.msg改变时，vm.reverseMsg也会改变

         computed:{

             //计算属性的getter

             reverseMsg:function(){

                 return this.msg.split('').reverse().join('');

             },

             fullName:{

                 get:function(){

                     return this.firstName+' '+this.lastName;

                 },

                 set:function(newValue){

                     var value=newValue.split(' ');

                     this.firstName=value[0];

                     this.lastName=value[1];

                 }

             }

         },

         methods:{

            reverseMsg1:function(){

               return this.msg.split('').reverse().join('');

            }

         }

     });

     vm.fullName='John Lee';

 </script>

 </body>

 </html>

2.下面是监听器相关代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue4 监听属性</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->

     <script src="vue.js"></script>

 </head>

 <body>

 <div id="app">

     <input type="text" v-model="meter">

     <input type="text" v-model="kilometer">

     <p class="test"></p>

 </div>

 <!--其实计算属性在大多数时候更合适，但是当数据执行异步操作或开销较大的操作时，需要采用监听器操作-->

 <script>

     var vm=new Vue({

         el: '#app',

         data:{

             meter:'',

             kilometer: ''

         },

         watch:{

             //watch创建了meter和kilometer两个方法

             meter:function(val){

                 this.meter=val;

                 this.kilometer=val/1000;

             },

             kilometer:function(val){

                 this.kilometer=val;

                 this.meter=val*1000;

             }

         },

     });

     vm.$watch('meter',function(newValue,oldValue){

         document.getElementsByClassName('test')[0].innerHTML="meter新值："+newValue+ ";" + "meter旧值："+oldValue;

     })

 </script>

 </body>

 </html>

在第一个输入框中输入123后，运行结果：

参考：https://cn.vuejs.org/v2/guide/，http://www.runoob.com/vue2

Vue学习3：计算属性computed与监听器的更多相关文章

  1. VUE学习之计算属性computed

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

  2. Vue教程：计算属性computed与侦听器watch（三）

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

  3. [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别

    一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...

  4. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  5. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  6. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  7. vue学习笔记 计算属性（四）

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...

  8. Vue学习之--------计算属性（2022/7/9）

    文章目录 1.计算属性 1.1 计算属性实现 1.1.1 基础知识 1.1.2 代码实例 1.1.3 测试效果 1.2 计算属性简写 1.2.1 简写代码 1.3 使用插值语法实现 1.3.1 代码实 ...

  9. vue监听器watch & 计算属性computed

    侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...

随机推荐

  1. window编程_消息分类

    Window应用程序利用Windows消息(Message)与应用程序及系统进行信息交换.消息分为:消息号:有事先定义好的消息名标识字节参数(wParam):用于提供消息的附加信息长字节参数(lPar ...

  2. 使php支持pdo_mysql

    1.下载pdo_mysql包 wget https://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz 2.追加编译php,使其module目录下生产pdo_mysql.so ...

  3. pymongo使用手册

    MongoDB是由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活.在这一节中,我们就来看 ...

  4. 02-Python入门学习-变量

    一.编程语言介绍1.机器语言:直接用二进制编程,直接控制硬件,需要掌握硬件的操作细节优点:执行效率高缺点:开发效率低 2.汇编语言:用英文标签取代二进制指令去编写程序,直接控制硬件,需要掌握硬件的操作 ...

  5. linux进阶指令

    1.df  查看磁盘空间  2.free   查看内存使用 -m 表示以mb位单位查看 total    总大小 used   使用过的空间 free 空闲的空间 shared 共享内存 buffer ...

  6. js之promise讲解

    1 Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口. 那么,什么是Promises? 首先,它是一个对象,也就是说与其他JavaScript ...

  7. Hash算法的讲解

    散列表,又叫哈希表,它是基于快速存取的角度设计的,也是一种典型的“空间换时间”的做法.顾名思义,该数据结构可以理解为一个线性表,但是其中的元素不是紧密排列的,而是可能存在空隙. 散列表(Hash ta ...

  8. Java课程课后作业190309之连续最大子数组

    老师在课堂是提出了这个问题,并且提出了时间复杂度是O(n)的要求,一开始我自己思想简单,在逻辑上出现了十分粗心的错误,后来同学们也在课堂上比较激烈地讨论了一番,也只是将时间复杂度降到了O(n*n),在 ...

  9. Windows系统JDK安装配置

    JDK和JRE的安装 打开java的官方网站,下载安装程序,版本根据自己情况选择: 双击安装程序: 点击"下一步": 此处推荐默认路径安装,如果自定义安装目录,则需记住自定义的安装 ...

  10. 【搜索2】P1706 全排列问题

    题目描述 输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 输入输出格式 输入格式: n(1≤n≤9) 输出格式: 由1-n组成的所有不重复的数字序列, ...