Привет.
HTML код:
|
Код:
|
<div id="app">
<div class="cb-top-line">
<div class="cb-step cb-step--current" data-step="cb-item1" id="cb-step1" @click="switchView('ppicture')">
<p>
<span>1</span>
Изображение
</p>
</div>
<div class="cb-step" data-step="cb-item2" id="cb-step2" @click="switchView('rramka')">
<p>
<span>2</span>
Рама
</p>
</div>
<div class="cb-step" data-step="cb-item3" id="cb-step3" @click="switchView('ttitle')">
<p>
<span>3</span>
Заголовок
</p>
</div>
<div class="cb-step" data-step="cb-item4" id="cb-step4" @click="switchView('ffinger')">
<p>
<span>4</span>
Цвет отпечатков
</p>
</div>
</div>
</div> |
Ну и дальше обернул 4 блока в тег <template> и дал каждому свой айди т.е (#ppicture-template и т.д).
После чего написал код на VUE.JS:
|
Код:
|
new Vue({
el: '#app',
data:{
currentView: 'ppicture'
},
components: {
ppicture: {
template: '#ppicture-template'
},
rramka: {
template: '#rramka-template'
},
ttitle: {
template: '#ttitle-template'
},
ffinger: {
template: '#ffinger-template'
},
},
methods:{
switchView: function(view){
this.currentView = view;
}
}
}) |
Ну и в конце там где хочу видеть свои блоки написал:
<component :is="currentView"></component>.
В итоге ничего не отображаеться.
