计算属性computed的使用

效果图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script type="text/javascript" src="./lib/vue-2.4.0.js"></script></head><body><div id="app"><!-- 分析： --><!-- 1. 我们要监听到 文本框数据的改变，这样才能知道 什么时候去拼接 出一个 fullname --><!-- 2. 如何监听到 文本框的数据改变呢？？？ --><input type="text" v-model="firstname" />+<input type="text" v-model="middlename" />+<input type="text" v-model="lastname" />=<!-- 一打开浏览器就会有第一次引用 调用computed计算属性 把结果缓存起来 --><input type="text" v-model="fullname" /><!-- 页面中重复引用直接从缓存中获取第一次引用的结果 不会重新调用conputed中计算属性function求值  --><p>{{ fullname }}</p><p>{{ fullname }}</p><p>{{ fullname }}</p></div><script type="text/javascript">// 创建 Vue实例，得到 ViewModelvar vm = new Vue({el: "#app",data: {firstname: "",middlename: "",lastname: ""},methods: {},computed: {// 自定义一些计算属性，只限制当前vm实例控制区域使用// 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，// 就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；// 并不会把 计算属性，当作方法去调用；// 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；// 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发生了变化，就会 立即重新计算 这个 计算属性的值// 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 页面中只在第一次引用时调用这里function 结果被缓存起来// 从第二次开始页面上所有引用全部从缓存中获取 不会再重新调用这里的function// 如果 计算属性方法中，所依赖的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；fullname: function() {// 类似与对象的访问器get, 最终映射为属性名为健:return结果为值// 页面上引用了一次 第一次来获取fullname值 必然调用一下function 返回结果// 页面第二次引用 没修改数据时 不会重新调用计算属性求值console.log("ok"); // 只执行一次return this.firstname + "-" + this.middlename + "-" + this.lastname;// return "hello word";}}});//   var obj = {//     firstname: "xu",//     lastname: "xingfeng",//     get fullname() {//       return this.firstname + this.lastname;//     },//     set fullname(value) {//       this.firstname = value;//     }//   };//   console.log(obj.fullname);</script></body>
</html>

计算属性computed的使用相关推荐

vue 计算属性和data_vue之watch和计算属性computed
区别一:watch监听的是一个变量(或者一个常量)的变化,这个变量可能是一个单一的变化也可能是一个数组.computed可以监听很多个变量,但是这个变量一定是vue实例里面的. Vue 测试实例 - ...
vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现
1. 前言原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...
Vue3计算属性computed
计算属性computed是用来存储属性数据的对数据进行逻辑处理操作,实现数据包装计算属性通常依赖于当前vue对象中的普通属性当依赖的依赖的普通属性发生变化的时候,计算属性也会发生变化计算属性俩 ...
vue2.0中的watch和计算属性computed
watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
vue的计算属性computed
计算属性的应用场景从已有的数据A中计算等到的新的数据B,使用计算属性如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式计算属 ...
vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...
vue2计算属性computed
1.什么是计算属性概念: 1.计算属性是vue的一个特性,此属性有计算能力,也就相当于一个函数.可以将计算结果缓存,作为一个属性使用. 特点: 1.要在 methods: { } 或者 comput ...
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分预计效果代码结果展示预计效果页面输入数学.物理.英语分数,自动计算出总分和平均分,并展示到界面,如下图所示代码 ...

计算属性computed的使用

计算属性computed的使用相关推荐

最新文章

热门文章