Vuejs中methods和data属性的使用(2)-木庄网络博客

2022-02-15 11:47:14 PHP中文网 JavaScript 百度已收录

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

1	`npm run serve`

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

methods属性

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

<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  },
  methods:{
      welcomeMsg:function(){
          return `Welcome to ${this.title} world`
      }
  }
};
</script>

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

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

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

<template>
  <div>
    <h1>Hello {{title}}</h1>
    <h2>{{welcomeMsg()}}</h2>
  </div>
</template>

以上就是Vuejs中methods和data属性的使用的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » Vuejs中methods和data属性的使用

Vuejs中methods和data属性的使用

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论