小程序互联网年代_Vue computed核算属性的使用方法

发布时间:2021-01-11 16:14 作者:jianzhan

摘要: puted测算特性的应用方式 puted测算特性的应用方式,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下computedcomputed:非常于method,回到function内return的值取值在html的

puted计算属性的使用方法       puted计算属性的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

computed

computed:相当于method,返回function内return的值赋值在html的DOM上。但是多个{{}}puted内的function也只执行一次。仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容。

computed和method的对比

 div id="example" 
 {{ message.split('').reverse().join('') }}
 /div 

这个是vue官网一直拿来作为例子的代码。在{{}}可以很方便的放入单个表达式,但是当一个HTML的DOM里面存在太多的表达式,程序会变得很笨重难于维护。

html

 div id="app9" 
 puted的区别 br/ 
 fullName br/ 
 {{fullName}} br/ 
 fullName2 br/ 
 {{fullName}} br/ 
 fullNameMethod br/ 
 {{getFullName()}} br/ 
 fullNameMethod2 br/ 
 {{getFullName()}} br/ 
 /div 

js

var app9 = new Vue({
 el: '#app9',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 methods:{
 getFullName:function () {
 console.log("执行了methods")
 return this.firstName+" " +this.lastName;
 computed: {
 fullName: function () {
 console.log("执行了computed")
 return this.firstName + ' ' + this.lastName
setTimeout('app9.firstName="Foo2"',3000);

控制台输出的结果
执行了methods
执行了methods
执行了computed
执行了methods
执行了methods 

相同点:在以上代码中,两个p标签都会打印出同样被反转的Hello。

不同点:
使用了methods的:HTML中,每一个调用了Vue的methods的方法,都需要执行一遍reversedMessage()这个方法;
而使用computed计算属性的,只执行一遍将结果保存在缓存中。

computed和watch的对比

html

 div id="demo" {{ fullName }} /div 

js

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 watch: {
 firstName: function (val) {
 this.fullName = val + ' ' + this.lastName
 lastName: function (val) {
 this.fullName = this.firstName + ' ' + val
})

  • 什么是功能网站?什么是

    一般企业公司企业网站建设的目的都是便于呈现企业知名品牌品牌形象以及业务流程步骤和产品的营销推广营销推广,并从互连网方法上获得消费者资源,促进消费者变换率,保证营销

  • 企业做网站建设应该怎么

    如今“互连网+”时期已到来临,企业网站建设可能迈入哪些的更改呢?在这里个大自然环境下,墨守陈规是会淘汰的,仅有更改、自主创新才可以迈入新的提升,那麼企业网站建设将来的

  • 凡科抠图将人物照片转成

    Photoshop将角色相片转成极致的古典鼠绘帅哥HBSHEN 公布 创作者:替补的神 我想评价本实例教程详细介绍超难角色转鼠绘实际效果的方式。创作者是位鼠绘非常大神,因而他带来大家

  • 如何免费建设私人网站?

    网站源代码完全免费的十分多,可是假如要想一个单独网站域名的网站還是要有一定花费的。

    到 http:\ 免费下载开源系统的系统软件,除开必须选购网站域名和网络服务器外能

  • 网页制作如何取消手机版

    制作HTML静态数据网页页面,用力机开启显示信息的难以看,能否在编码里撤销手机上版的显示信息,让手机上开启的情况下也显示信息电脑上版网页页面?谢邀从你的描述里能看得出,