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. koa2学习(一)

    前期准备: node环境 npm包管理工具 安装Koa npm install --save koa 第一个程序 创建index.js const Koa = require('koa'); cons ...

  2. 【RL-TCPnet网络教程】第17章 RL-TCPnet之UDP通信

    第17章      RL-TCPnet之UDP通信 本章节为大家讲解RL-TCPnet的UDP通信实现,学习本章节前,务必要优先学习第16章UDP用户数据报协议基础知识.有了这些基础知识之后,再搞本章 ...

  3. emWin万年历,含uCOS-III和FreeRTOS两个版本

    第8期:万年历配套例子:V6-914_STemWin提高篇实验_万年历(uCOS-III)V6-915_STemWin提高篇实验_万年历(FreeRTOS) 例程下载地址: http://forum. ...

  4. Select下拉框使用ajax异步绑定数据

    <!--前端样式--> <style> #searchs { width: 200px; position: absolute; border-top: none; margi ...

  5. [Swift]LeetCode713. 乘积小于K的子数组 | Subarray Product Less Than K

    Your are given an array of positive integers nums. Count and print the number of (contiguous) subarr ...

  6. Docker for windows : 安装linux

    一.Linux 1.拉取镜像 docker pull hub.c..com/library/oraclelinux:latest 2.创建linux容器 C:\Users\K-Jso>docke ...

  7. javascript 使用小技巧总结

    按位取反 ~a 即:返回 -(a+1),会去掉小数点. let a = 3.14; let b = ~a; //b = -(3.14+1) 取整 为-4: let c = ~b; //c = -(-4 ...

  8. webstorm 支持vue element-ui 语法高亮属性自动补全

    如果webstorm中 提示 Unknown html tag el-*** 说明没有加载 node_modules 下的 element-ui 解决办法就是: 在webstorm 打开的状态下 第一 ...

  9. 死磕NodeJs之REPL与For Server,我的艰辛的旅程(一)

    ode.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并接 ...

  10. bootstrap4的出现(或这篇文章可以叫做bs4与bs3的区别)

    前言:在bootstrap4出现之后修改了bootstrap3的不方便之处,让使用框架的前端开发者更加便捷..(bootstrap下文中简称为bs) 一.栅格系统 相对于原来的bs3,bs4具有了范围 ...