this 指针问题

methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢?

因为new Vue对象实例化后data中的成员和computed中的成员为实现化对象属性了,而methods中定义的方法为实现化对象方法了。这时this指针指向的是这个实现化对象。

    let v = new Vue({
el: '.test',
data: {
title: "121213"
},
methods: {
msg() {
alert(this.title); // ?? this 指针
}
},
computed: {
prefixTitle() {
return "¥" + this.title;// ?? this 指针
}
}
});

vue中computed计算属性与methods对象中的this指针的更多相关文章

  1. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  2. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  3. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  4. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  5. vue的computed计算属性

    computed可定义一些函数,这些函数叫做[计算属性] 只要data里面的数据发生变化computed会同步改变 引用[计算属性]时不要加  () ,应当普通属性使用 例:console.log(t ...

  6. Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...

  7. vue.js初探:计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  8. 小白学习vue第三天,从入门到精通(computed计算属性)

    computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...

  9. vue-methods方法与computed计算属性的差别

    好吧,我就是单纯的举个例子:实现显示变量 message 的翻转字符串 第一种:methods:我们可以通过在表达式中调用方法来达到同样的效果: 第二种:computed:计算属性 上面的2中方法都实 ...

随机推荐

  1. [Java]LeetCode138. 复制带随机指针的链表 | Copy List with Random Pointer

    A linked list is given such that each node contains an additional random pointer which could point t ...

  2. [Swift]LeetCode271. 加码解码字符串 $ Encode and Decode Strings

    Design an algorithm to encode a list of strings to a string. The encoded string is then sent over th ...

  3. PHP算法之斐波那契数列(递归)

    /*斐波那契数列 源代码分析 f(x) = 1 ; 当 x < 2 ; f(x) = f(x-1)+f(x-2); 当 x >= 2 ; 通项式为:fn ={((1+根号5)/2)^n-( ...

  4. 前端(各种demo)二:左侧导航栏的折叠和打开(不使用js)基础版和升级版

    1.给div设置定位. 复习一下—— css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed: ...

  5. qt之图像处理

    毕业2年了,一直使用的qt做桌面程序,很少接触图像算法类的东西,最近由于项目的原因,不得不了解下图像处理,不过也是一些简单的图像处理,仅此作为记录,并希望能帮助初学qt图像处理的朋友. 首先我推荐一篇 ...

  6. linux-centerOs6.8安装nginx与配置

    一:安装nginx 1.安装gcc(命令:yum install gcc)备注:可以输入gcc -v查询版本信息,查看是否自带安装 2.安装pcre(命令:yum install pcre-devel ...

  7. 『2019/3/8 USACO测试 反思与总结』

    2019/3/8 USACO测试 这一次是到高中的第一次考试,考得不太好,原因有很多. 先看一下试题安排: 题号 试题分组 考察算法 思维难度 代码难度 1 金组\(T1\) 建图+最短路 ★★★ ★ ...

  8. asp.net core 系列 9 环境(Development、Staging 、Production)

    一.在asp.net core中使用多个环境 ASP.NET Core 配置是基于运行时环境, 使用环境变量.ASP.NET Core 在应用启动时读取环境变量ASPNETCORE_ENVIRONME ...

  9. Android Studio gradle插件版本和gradle版本对应关系

    1.gradle插件版本配置位置: project对应的build.gradle文件中 buildscript { repositories { jcenter() } dependencies { ...

  10. AndroidStudio意外崩溃,电脑重启,导致重启Find In Path...查找功能失效,搜索结果缺失

    解决方案: <AndroidStudio意外崩溃,电脑重启,导致重启打开Androidstudio后所有的import都出错>