vue中的methods方法

59 阅读 0 评论 39 点赞

我是靠谱客的博主唠叨手套，这篇文章主要介绍vue中的methods方法，现在分享给大家，希望可以做个参考。

一、对methods的理解
methods:{ } 里是写各种不同的方法函数，这些方法可以理解为是一个属性，因为调用这个方法的时候，最终返回的是一个值
二、
①index.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"></script>
    <title>Vue CDN</title>
  </head>
  <body>
    <div id="vue-app">
      <h1>Data binding</h1>
      <h1>Hello, {{ name }}</h1>
      <p>你的微信是: {{ wechat }}</p>
      <p>
        <a :href="website">baidu</a>
      </p>
      <!-- <p>{{ websiteTag }}</p> -->
      <p v-html="websiteTag"></p>

      <p><input type="text" v-bind:value="name" /></p>
    </div>
  </body>
  <script src="app.js"></script>
</html>

②app.js

// 实例化vue对象
new Vue({
  el: '#vue-app', //指定 Vue 实例的挂载目标
  data() {
    return {
      name: '小蒋',
      wechat: 'taoyanlxq',
      website: 'https://www.baidu.com',
      websiteTag: '<a href="https://www.taobao.com">taobao</a>'
    };
  },
  methods: {
    greet(time) {
      return `Good ${time} ${this.name}`;
    }
  }
});

显示效果如图：
在这里插入图片描述