Vue -在vue模型内调用方法
Vue -在vue模型内调用方法
提问于 2018-06-07 07:35:23
我是学习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()？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 07:52:41
你已经很接近了！您不需要在模板中使用this关键字，模板知道它们的上下文。所以像这样的东西是有效的：
HTML
<div id="app">
{{ renderContent() }}
</div>JS
new Vue({
el: "#app",
methods: {
renderContent: function() {
return ':-)'
}
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50731066
复制相关文章
相似问题