Question

我是学习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（）？

Answer 1

你很亲密！模板中不需要this关键字，模板可以识别其上下文。所以这样的事情有效：

HTML

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

JS

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

Vue - 在vue模型中调用方法

1 个答案: