我是学习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()?
发布于 2018-06-07 07:52:41
你已经很接近了!您不需要在模板中使用this
关键字,模板知道它们的上下文。所以像这样的东西是有效的:
HTML
<div id="app">
{{ renderContent() }}
</div>
JS
new Vue({
el: "#app",
methods: {
renderContent: function() {
return ':-)'
}
}
})
https://stackoverflow.com/questions/50731066
复制相似问题