使文本转到新文本

Posted 2023-02-23

【中文标题】使文本转到新文本

【英文标题】：making text go to new text

【发布时间】：2018-03-15 03:42:56

【问题描述】：

所以我真的不知道如何措辞，但我正在尝试创建一个序列，当有人点击三个按钮之一时，它会在他们按下按钮后转到新文本。问题是我不知道如何开始。我需要创建另一个模板还是可以使用我正在使用的同一个模板？ 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
        
    
);

【问题讨论】：

go to new text 是什么意思，您的代码工作正常，您是否参考了一些补间或效果来滑动文本？如果您这样做，请分享类似或示例 URL 以获得您需要的感觉。..

很抱歉，所以当有人按下三个按钮之一时 [showText2] 应该紧随其后，上面写着：'waiting for' + this.order_type

如果您需要，请查看我的答案

是的，这就是我要找的东西，但假设一旦有人按下三个按钮之一，就会出现等待滴水 示例：客户按下滴水 [一滴水将是 10 美元] 然后新文本将替换它说 [等待滴水] 所以它只是用新文本替换旧文本

所以我猜我需要一个固定的时间方法？？

【参考方案1】：

这是你需要的吗？一个模板，我添加了新属性

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
        ,
        showText2 ()
            if(this.order_type === '') return '';
            return 'waiting for ' + this.order_type
        
    ,
    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
        
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>


<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>showText2</div>
    </div>
</script>

<script type="text/x-template" id="c-template">
    <div>
        <div>showText2</div>
    </div>
</script>

【讨论】：

是的，这就是我要找的东西，但它假设一旦有人按下三个按钮之一，就会出现等待滴水 示例：客户按下滴水 [一滴水将是 10 美元] 然后新文本将替换它说[等待滴水]。

所以我猜我需要一个固定的时间方法？？

是的，我建议将ID放在您要替换文本的那个div上，然后使用setTimeout替换文本

那么如果我创建一个 ID，它将如何替换其他文本？