<div> <input type="text" v-model="num1"> <input type="text" v-model="num2"> <input type="button" value="加" @click="f(1)"> <input type="button" value="减" @click="f(2)"> <input type="button" value="乘" @click="f(3)"> <input type="button" value="除" @click="f(4)"> <h3>结果:<span></span></h3> </div> <script src="js/vue.min.js"></script> <script> let v= new Vue({ el:"body>div", data:{ info:"",num1:"",num2:"" }, methods:{ f(x){ switch (x){ case 1:v.info=v.num1+v.num2;break; case 2:v.info=v.num1-v.num2;break; case 3:v.info=v.num1*v.num2;break; case 4:v.info=v.num1/v.num2;break; } } } })网页的info为什么没有结果

您需要将 `<span>` 标签和 `v.info` 进行绑定，以便在执行计算后将结果显示在页面上。您可以将 `<span>` 标签的内容设置为 `{{ info }}`，这样当 `info` 数据发生变化时，页面上的结果也会及时更新。修改后的代码如下：

<div>
  <input type="text" v-model="num1">
  <input type="text" v-model="num2">
  <input type="button" value="加" @click="f(1)">
  <input type="button" value="减" @click="f(2)">
  <input type="button" value="乘" @click="f(3)">
  <input type="button" value="除" @click="f(4)">
  <h3>结果:<span>{{ info }}</span></h3>
</div>
<script src="js/vue.min.js"></script>
<script>
  let v = new Vue({
    el: "body>div",
    data: {
      info: "",
      num1: "",
      num2: ""
    },
    methods: {
      f(x) {
        switch (x) {
          case 1:
            v.info = Number(v.num1) + Number(v.num2);
            break;
          case 2:
            v.info = v.num1 - v.num2;
            break;
          case 3:
            v.info = v.num1 * v.num2;
            break;
          case 4:
            v.info = v.num1 / v.num2;
            break;
        }
      }
    }
  })
</script>

请注意，在进行加法计算时需要将输入的字符串转换为数字类型，否则会进行字符串拼接而不是数字相加。