首页  >  文章  >  web前端  >  Vuejs中methods和data属性的使用

Vuejs中methods和data属性的使用

藏色散人
藏色散人原创
2019-04-18 11:09:3410582浏览



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

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

创建我们的项目

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

vue create vue-app

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

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

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

App.vue

<template>
  <div>
    <h1>Hello Vuejs</h1>
  </div>
</template>

<script>
export default {};
</script>

<strong>data</strong>属性

在上面的代码中,我们将在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签内导出默认的空对象,让我们将data属性添加到该空对象中。

<script>
export default {
   data:function(){
       return {
           title: "Vuejs"
       }
   }
};
</script>

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

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

App.vue

<template>
  <div>
    <h1>Hello {{title}}</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  }
};
</script>

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

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

npm run serve

3a56cad3065e4e0479e7bf9f122c4bc.png

你看到我们的{{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>

ee4850e6bd21390c4ff115e2672fc66.png



以上是Vuejs中methods和data属性的使用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn