专栏首页前端の进行时Vue.js入门教程-methods

Vue.js入门教程-methods

一、输出数据

(1)在 Vue.js 的学习中,最开始接触的是使用文本插值输出数据。

(2)但如果需要根据某些规则或逻辑输出数据呢?在这种情况下,我们可以通过 Vue.js 中的计算属性实现。

(3)除了以上方式,还可以嵌入JavaScript的逻辑函数

二、文本插值

如下示例,data 数据中有两个属性 firstName 和 lastName ,要求输出 fullName。

可以在页面中看到输出全名(fullName),也就是“前端开发 攻城狮”。

三、计算属性

使用 Vue.js 中的 computed 属性,并且在 computed 中创建 fullName 方法。其中键名就是函数名(fullName),而键值是函数。

可以在页面中看到输出全名(fullName),也就是“前端开发 攻城狮”。

四、函数

4.1 说明

(1)函数必须在 Vue.js 中的 methods 属性下添加,类似于计算属性(computed)。

(2)在 Vue.js 中,methods 被命名为方法,是调用对象上下文中的函数,还可以操作对象中包含的数据。

4.2 示例

(1)上述示例,对象其实就是 Vue 实例,该对象中的 即方法名(fullName 也就是 methods 的方法名),其 为一个函数

(2)怎样访问方法中的数据属性?

Vue 代理的数据和方法在上下文中都可用,所以 this.firstName 即访问 data 中的 firstName 属性。

(3)Vue 中的 datamethods 都是上下文中的变量,所以可以通过 this.firstName 的方式访问 data 中的 firstName 属性。

(4)使用 Vue 的 methods 时,当调用 methods 定义的方法时,一定记得加上小括号 (),不然输出的就是函数中的字符

4.3 传参

(1)Vue 中的 methods 能够添加参数,类似 JavaScript 中的函数传参数。

(2)参数使用不同的名称,防止和 data 对象的属性同名,造成一定的混淆,这样做只是为了证明不依赖数据中的属性。

(3)在模板中,只需使用数据对象中的适当属性名作为 fullName 的参数传递给方法即可。

(4)除此之外,还可以和 JavaScript 的函数调用一样,传一些 不在 data 中的属性做为参数,也能够输出在页面上。

参考文章 Vue 2.0的学习笔记:Vue的Methods

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript-包装对象

    (2)这7种数据类型中,对象为“引用类型”,其他六种为“原始类型”(或叫“基本类型”)。

    WEBING
  • JavaScript-对象

    (1)JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。

    WEBING
  • jQuery入门教程-CSS样式操作大全

    (1)滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时,位置是 0。

    WEBING
  • 基于Python开发的NFuzz

    本脚本程序仅为学习交流分享,请遵守《中华人民共和国网络安全法》,勿用于非授权测试,如作他用所承受的法律责任一概与作者无关。

    Aran
  • 利用图像识别技术来做自动化测试和编写爬虫?

    Airtest 项目是在 2018 年 Google 的 GDC 大会上公布的产品,主要使用图像识别技术来定位页面具体的 UI 元素,这也就意味着它可以在不使用...

    GitHubDaily
  • 前端常见面试题

    Hello,安雅兮又来啦!!!现在是网络招聘的高峰期,过完年的部分小伙伴们可能面临着求职的问题。哈哈哈,Don't worry。贴心的小编姐姐已经给小主们整理好...

    用户7386338
  • 介绍-The Boost C++ Libraries

    Boost C ++库是基于C ++标准的现代库的集合。源代码是根据Boost软件许可发布的,该许可允许任何人免费使用,修改和分发这些库。这些库是独立于平台的,...

    ccf19881030
  • 4家研究公司对边缘计算市场的预测

    尽管分析师对于边缘计算市场的预测在市场规模和未来几年的增长率方面差异很大,但他们总体的预测都比较乐观。在Equinix委托的一份报告中,Gartner甚至认为“...

    SDNLAB
  • 腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践

    本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦。”

    JackJiang
  • 【编程基础】C语言循环语句解析

    循环语句是一种很重要的结构,这种结构的特点就是在某种条件下,会重复循环执行某一段代码,直到条件不成立为止。这里的条件称为循环条件,重复执行的那段代码称为循环体。...

    程序员互动联盟

扫码关注云+社区

领取腾讯云代金券