动态改变超链接中的文字与Vue JS 2
问题描述:
我想创建一个空的超链接,当点击时会触发一个方法。但是,由于未知原因,该方法被调用,但文本不具有约束力。 您可以复制并尝试在地址:https://jsfiddle.net/yyx990803/okv0rgrk/动态改变超链接中的文字与Vue JS 2
new Vue({
el: '#app',
data: {
message: 'Edit'
},
methods: {
\t edit() {
message: 'Done'
}
}
})
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<a href="javascript:void(0);" v-on:click="edit()" id="app">
{{message}}
</a>
答
您没有正确访问Vue的实例的数据属性。
甲Vue的实例的数据属性经由data
属性设置(或更通常data
法),但随后是通过this
上的实例直接访问。
new Vue({
el: '#app',
data() {
return {
message: 'Edit'
}
},
methods: {
\t edit() {
this.message = 'Done';
}
}
})
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<a href="javascript:void(0);" v-on:click="edit()" id="app">
{{message}}
</a>