javascript - 不显示文字

Question

我正在创建一个带有三个按钮的咖啡师小应用程序，而不是试图让文本显示“一个会是"直到有人单击三个组件之一。我知道我很接近，只是找不到任何对它的引用这是我的 HTML:

    <div id="app">

    <barista-template></barista-template>
</div>


    <!--template for Barista-->
<script type="text/x-template" id="b-template">
    <div>
        <div> one {{order_type}} that would be {{order_value}}</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>
</body>
</html>

这是我的 Javascript

Vue.component("barista-template",{
    template: "#b-template",
    data: function () {
        return{
            user_order:"",
            computer:"",
            outcome:"",
            order_type:"",
            order_value: "",    
        }
    },
    methods: {
        choose: function (order_type) {
            this.order_type = order_type;

            if (this.user_order == "drip") {
                if (this.order_value == "drip") this.order_value = $10;

            }
            if (this.user_order == "frenchpress") {
                // if (this.computerMove == "frenchpress") this.outcome ="French press";

            }
            if (this.user_order == "Aeropress") {
                if (this.computerMove == "Aeropress") this.outcome ="Aeropress";

            }

        }
    }

});

new Vue ({
    el:"#app",
    data:function () {
        return{
            showing:false
        }
    }
}); 

Answer 1

我会为此使用计算，但你也可以使用

<div v-if="order_type !== ''"> one {{order_type}} that would be {{order_value}}</div>

计算只是让代码更具可读性

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:false
      }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <barista-template></barista-template>
</div>

<!--template for Barista-->
<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>