methods的使用

最近在学习Vue，感觉methods还是有必有总结一下的，看的米斯特吴的视频，讲的很精髓。下面是我对methods的理解。

methods是Vue对象中作为函数块的包装盒，methods中可以包含多个函数，函数也可以传参，同时在HTML代码中可以直接使用，例如methods中有greet(time)函数，可以这样使用<p>{{greet('evening')}}</p>，这样就会自动执行函数gree（time），同时methods中的函数有返回值，返回的是对象，调用data（）中的数据可以用this.变量名。
return 字符串时可以用“+”拼接，例如 return "good night" + this.name; 但是不推荐使用，因为如果字符串过长容易出错，比较流行这种写法：
methods包含的函数块可以用这种方式来写greet: function () { return "good night" + this.name;}，但是不推荐那样写，对于学过JS的人看起来很别扭，所以推荐这样写greet(time) { return "good night" + this.name; }
代码示例：
JS

// 实例化vue对象
new Vue({el: "#vue-app",//elmentdata() {return {name: "小哥哥",wechat: '2004343',website: 'https://www.baidu.com',}},methods: {// greet: function () {//     return "good night" + this.name;// }greet(time) {// return "good night" + this.name;return `Good ${time} ${this.name}`;},haveLunch() {return `吃过午饭了吗？`;}}
});

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title>Vue CDN</title>
</head><body><div id="vue-app"><h1>Data binding</h1><h1>hello,{{name}}</h1><p>你的微信是：{{wechat}}</p><p>{{greet('evening')}}</p><p>{{haveLunch()}}</p><p><a v-bind:href="website">baidu</a></p><p><input type="text" v-bind:value="name" /></p></div></body><script src="app.js"></script></html>

运行结果：

methods的使用相关推荐

非本地类型不能定义方法 cannot define new methods on non-local type time.Duration
能够随意地为各种类型起名字,是否意味着可以在自己包里为这些类型任意添加方法 ? 参见下面的代码演示 : package mainimport "time"type MyDurati ...
Static interface methods are only supported starting with Android N (--min-api 24): void okhttp3.log
错误内容如下 Error: Static interface methods are only supported starting with Android N (--min-api 24): vo ...
强化学习（四） - 蒙特卡洛方法（Monte Carlo Methods）及实例
强化学习(四) - 蒙特卡洛方法(Monte Carlo Methods)及实例 4. 蒙特卡洛方法 4.1 蒙特卡洛预测例4.1:Blackjack(21点) 4.2 动作价值的蒙特卡洛估计 4. ...
Effective Java - Item 1: Consider static factory methods instead of constructors
考虑使用静态工厂方法来替代构造方法, 这样的做的好处有四点. 1. 更好的表意有的构造方法实际上有特殊的含义, 使用静态工厂方法能更好的表达出他的意思. 例如 BigInteger(int, int ...
阅读Book：MultiObjective using Evolutionary Algorithms（7）---Weighted Sum Methods ε-Constraint Methods
(1) Classical multi-objective optimization methods have been around for at least four decades. (2) ...
Vue之for列表渲染、methods事件和model表单绑定
2.4 for列表渲染文档:https://cn.vuejs.org/v2/guide/list.html v-for指令可以绑定数组的数据来渲染一个项目列表 v-for指令需要使用item in ...
Nature Methods | TooManyCells:单细胞聚类和可视化方法
2020年3月2日宾夕法尼亚大学的Gregory W. Schwartz等研究人员在nature methods上发表了题为TooManyCells identifies and visualizes ...
Nat. Methods | 学习微生物与代谢产物之间相互作用的神经网络
作者 | 蒋长志单位 | 厦门大学方向 | 微生物表征学习今天给大家介绍2019年11月,加州大学圣地亚哥分校儿科和微生物创新中心.加州大学计算机科学与工程系和质谱创新中心合作在Nature m ...
Nat. Methods | ilastik:为生物图像分析而生的交互式机器学习平台
工具简介来自德国海德堡大学的Hamprecht团队开发了一款使用简便的开源交互式工具-ilastik.ilastik能够给用户提供良好的基于机器学习的生物信息图像分析服务,这对于在计算机专业知识方面 ...
Nature Methods：Rob Knight发布Striped UniFrac算法轻松分析微生物组大数据
Striped UniFrac微生物组大尺度分析算法 Striped UniFrac: enabling microbiome analysis at unprecedented scale Natu ...

methods的使用

methods的使用相关推荐

最新文章

热门文章