vue
<div id="vue">
<span v-for="item in items">
{{ item.name }}
</span>
<span v-show="show2" @click="showHide">
( span v-show 02 ....) --> component01
</span>
<component01 message="hello" :_show="show"></component01>
</div>
<script>
(function () {
'use strict';
Vue.component('component01', {
props: ['message','_show'],
template: '<div v-show="_show">A custom component {{message}}! -> {{_show}}</div>'
});
var app = new Vue({
el: '#vue',
data: {
show: true,
show2: true,
items: [
{name: 'aaa'},
{name: 'bbb'},
],
message: 'ssssssss'
},
methods: {
showHide: function (){
var is = this.show == true;
if(is){
this.show = false;
}else{
this.show = true;
}
}
},
});
}());
</script>