1
Donc, je ne sais vraiment pas comment dire cela, mais j'essaie de créer une séquence quand quelqu'un clique sur l'un des trois boutons, il ira au nouveau texte après qu'ils ont appuyé sur le bouton . La chose est que je ne sais pas comment le démarrer. Ai-je besoin de créer un autre modèle ou pourrais-je utiliser celui que j'utilise? HTML:faire du texte aller au nouveau texte
<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
}
}
});
que voulez-vous dire par 'aller à nouveau Text' ,, votre code fonctionne très bien ,, vous refere une certaine tween ou pour effet de faire glisser le texte? si vous le faites s'il vous plaît partager similaire ou exemple d'URL pour obtenir le sentiment de ce que vous avez besoin .. –
désolé à ce sujet alors quand quelqu'un appuie sur l'un des trois boutons [showText2] est supposé venir juste après il qui dit: 'attente pour' + this.order_type –
voir ma réponse si c'est ce dont vous avez besoin –