1
이렇게 단어를 쓰는 방법을 모르겠지만 누군가가 세 개의 단추 중 하나를 클릭하면 단추를 누른 후 새 텍스트로 이동하게 될 때 시퀀스를 만들려고합니다. . 것은 그것을 시작하는 방법을 모른다. 다른 템플릿을 만들어야합니까, 아니면 내가 사용하고있는 템플릿을 사용할 수 있습니까? HTML :텍스트를 새 텍스트로 이동합니다.
<div id="app">
<barista-template></barista-template>
</div>
<!--template for customer-->
<script type="text/x-template" id="b-template">
<div>
<div>{{showText}}</div>
<button v-on:click="choose('drip')">Drip</button>
<button v-on:click="choose('frenchpress')">French Press</button>
<button v-on:click="choose('aeropress')">Aeropress</button>
</div>
</script>
<script type="text/x-template" id="c-template">
<div>
<div>{{showText2}}</div>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="JS/app.js"></script>
</body>
</html>
JS
Vue.component("customer-template",{
template:"#c-template",
data:function(){
return{
order_type:"",
}
},
computed:{
showText2(){
if(this.order_type === '') return '';
return 'waiting for' + this.order_type
}
}
});
Vue.component("barista-template",{
template: "#b-template",
data: function() {
return{
order_type:"",
order_value: "",
}
},
computed: {
showText() {
if(this.order_type === '') return '';
return 'One ' + this.order_type + ' that would be ' + this.order_value
}
},
methods: {
choose: function (order_type) {
this.order_type = order_type;
if (this.order_type == "drip") {
this.order_value = "$10";
}
if (this.order_type == "frenchpress") {
this.order_value = "$20";
}
if (this.order_type == "aeropress") {
this.order_value = "$30";
}
}
},
});
new Vue ({
el:"#app",
data:function() {
return{
showing:true
}
}
});
을 추가하고 '새로운 텍스트'로 이동 ,, 코드가 잘 작동 ,, 텍스트를 슬라이드 일부 트윈 또는 효과를 참조하지만합니까? 당신이 필요로하는 것의 느낌을 얻으려면 비슷한 URL이나 예제 URL을 공유하십시오. –
미안합니다. 누군가가 세 개의 버튼 중 하나를 누르면 [showText2]는 'waiting for'+ this.order_type –
그것이 내게 필요한 것이면 내 대답을 참조하십시오. –