时间戳

首页 > 解决方案 > Vue - 在 Vue 模型中调用方法

vue.js - Vue - 在 Vue 模型中调用方法

问题描述

我是学习 Vue 的新手，我正在尝试像这样在我的 HTML 中执行一个方法。在 React 中，您可以绑定要在 HTML 中执行的方法：

class Header extends Component {
    renderContent() {
           // bla...
        }
    }

render() {
    return (
        <nav>
            <div className="nav-wrapper">
                <ul className="right">
                    {this.renderContent()} // <----
                </ul>
            </div>
        </nav>
    );
}

}

我正在尝试在 vue 中做同样的事情，但真的不知道它叫什么或它是如何完成的？

<template>
  <v-toolbar fixed class="blue darken-4" dark>
    <v-toolbar-title class="mr-4">
    <span class="home"
          @click="navigateTo({name: 'root'})">
          App
      </span>
    </v-toolbar-title>
    <v-toolbar-items>
      <v-btn flat dark>

      </v-btn>
    </v-toolbar-items>
    <v-spacer></v-spacer>

    <v-toolbar-items>
      {{ this.renderContent}}

      <!--<v-btn @click="navigateTo({name: 'register'})" flat dark>-->
        <!--Sign Up-->
      <!--</v-btn>-->
    </v-toolbar-items>

  </v-toolbar>
</template>

<script>

  export default {
    methods: {
      navigateTo (route) {
        this.$router.push(route);
      },

      renderContent() {
         // bla...
      }
    }
  }
</script>

如何在 vue 的 HTML 中调用 renderContent()？

标签： vue.js

解决方案

你很近！您不需要模板中的this关键字，模板知道它们的上下文。所以像这样的工作：

HTML

<div id="app">
  {{ renderContent() }}
</div>

JS

new Vue({
  el: "#app",
  methods: {
    renderContent: function() {
        return ':-)'
    }
  }
})

推荐阅读