快速学习Computed-计算机的使用和3个特点 | 学习笔记

简介: 快速学习 Computed-计算机的使用和3个特点

开发者学堂课程【Vue.js 入门与实战Computed-计算机的使用和3个特点】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8207


Computed-计算机的使用和3个特点


一、课程代码展示

方式一是使用事件来监听,方式二是使用 watch 来监听的,接下来学习方式三 computed。

<script src="./1ibue-2.4.0.js"></script></head>

body>

<div id="app">

<input type="text" v-model="firstname">+

<input type="text" v-model="lastname"=

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

</div>

<script>

//创建vue 实例,得到ViewModel

var vm = new vue ( i

el: ‘’#app’ ,

data: {

firstname: ‘’,

lastname :’’,

Middlename:’’

},

methods: {},

computed: {

// 在 computed中,可以定义一些属性,这些属性,叫做【计算属性】,计算属性的,本质,就是一个方法,只不过,在使用这些计算属性的时候,是把它们的名称,直接当作属性来使用的,并不会把计算属性,当作方法去调用;

‘fullname’: function () {

return this.firstname +’-’+ this. Lastname

}

此时刷新是页面是可以正常执行的。

//注意1:计算属性,在引用的时候一定不要加()去调用,直接把它当做普通属性去使用就好了;

//注意2:只要计算属性,这个function内部,所用到的任何data中的数据发生了变化,就会立即重新计算这个计算属性的值

‘fullname’: function () {

return this.firstname +’-’+ this.middlename+’-’+ this.lastname

}

//注意3:计算属性的求值结果,会被缓存起来,方便下次直接使用;如果计算属性方法中,所依赖的任何数据,都没有发生过变化,则不会重新对计算属性求值;

‘fullname’: function () {

console.log(‘ok’)//ok会输出四次

return this.firstname +’-’+ this. Lastname

}

相关文章
|
2月前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:把求和案例改成getters
《进阶篇第9章》学习vuex知识点后练习:把求和案例改成getters
18 0
|
2月前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:把求和案例改成mapState与mapGetters
《进阶篇第9章》学习vuex知识点后练习:把求和案例改成mapState与mapGetters
15 0
|
7月前
|
块存储 芯片 内存技术
计算机组成原理(4)-----Cache的原理及相关知识点(1)
计算机组成原理(4)-----Cache的原理及相关知识点
339 2
|
7月前
|
缓存 算法 内存技术
计算机组成原理(4)-----Cache的原理及相关知识点(2)
计算机组成原理(4)-----Cache的原理及相关知识点
122 1
|
前端开发
前端学习笔记202304学习笔记第十五天-vue3.0-解构具名插槽的Prop
前端学习笔记202304学习笔记第十五天-vue3.0-解构具名插槽的Prop
56 0
|
7月前
|
存储
计算机组成原理学习笔记(待更新)
计算机组成原理学习笔记(待更新)
85 0
|
缓存 前端开发
前端经典面试题 | Computed 和 Watch 的区别
前端经典面试题 | Computed 和 Watch 的区别
|
前端开发
前端学习笔记202305学习笔记第二十天-vue3.0-了解作用域插槽的作用2
前端学习笔记202305学习笔记第二十天-vue3.0-了解作用域插槽的作用2
49 0
|
前端开发
前端学习笔记202305学习笔记第二十天-vue3.0-了解作用域插槽的作用1
前端学习笔记202305学习笔记第二十天-vue3.0-了解作用域插槽的作用1
43 0
|
JavaScript
Vue框架学习(第十三课)Vuex状态管理中的store和state属性
Vue框架学习(第十三课)Vuex状态管理中的store和state属性
187 0