Vuejs中methods和data属性的使用方法-创新互联

这篇文章主要介绍了Vuejs中methods和data属性的使用方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

成都创新互联公司云计算的互联网服务提供商,拥有超过13年的服务器租用、香港机房服务器托管、云服务器、虚拟主机、网站系统开发经验，已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、虚拟主机、域名与空间、VPS主机、云服务器、香港云服务器、免备案服务器等。

在本篇文章中，我们将给大家介绍如何在Vue JS中使用methods和data属性。

注，我们使用Vue cli生成项目。

创建我们的项目

让我们通过运行以下命令快速创建我们的vue项目。

vue create vue-app

以上命令将下载vue-app文件夹中所需的文件。

使用cd vue-app更改工作目录，然后使用你喜爱的代码编辑器打开项目文件夹。

在src文件夹中导航到App.vue文件并删除所有内容，然后用下面的代码替换。

App.vue

data属性

在上面的代码中，我们将在

data：data属性值是一个返回对象的匿名函数。该对象中的每个属性都被添加到Vue反应系统中，这样，如果我们更改了该属性值，那么vuejs将使用更新的数据重新呈现dom。

让我们使用{{}}双花括号将title属性添加到模板标记中。

App.vue

在Vuejs中，我们需要使用双花括号{{js expression}}来传递JavaScript表达式。

让我们使用以下命令启动开发服务器。

npm run serve

你看到我们的{{title}}被Vuejs替换了吗?

methods属性

让我们使用methods属性创建第一个方法。methods属性值也是一个对象。

在上面的代码中，我们添加了一个返回字符串的welcomeMsg方法。

在methods内部，我们可以使用this.propertyname访问数据对象。

让我们在template标签中调用welcomeMsg方法。

感谢你能够认真阅读完这篇文章，希望小编分享Vuejs中methods和data属性的使用方法内容对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站制作公司行业资讯频道，遇到问题就找创新互联建站，详细的解决方法等着你来学习!

分享名称：Vuejs中methods和data属性的使用方法-创新互联
网址分享：http://cdxtjz.cn/article/dpijcs.html