我正在使用带有两个组件和两个模板的Vue.JS。它们被多次使用:
<compone v-show="! showcompone"></compone>
<compone v-show="! showcomptwo"></compone>
和
<comptwo v-show="! showcompone"></comptwo>
<comptwo v-show="! showcomptwo"></comptwo>
我的vuejs如下:
new Vue({
el: '#app',
data: function(){
return {
showcompone: true,
showcomptwo: true,
}
}
});
我需要知道的是:如何让我的组件在点击时切换v-show
的{{1}}?如何通过组件更改data
属性值?
有更好的方法吗?
答案 0 :(得分:0)
Vue可以为您处理事件,只需使用v-on
指令或组件上的简写@
,例如:
<button @click="showcompone = !showcompone">Toggle one</button>
<button @click="showcomptwo = !showcomptwo">Toggle two</button>
你传递给@click
事件的是纯粹的javascript,所以你可以使用js调用函数或任何你想要的东西