Vue指令之v-model和双向数据绑定--简单计算器案例

简易计算器案例

1. HTML 代码结构

  <div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calc">
    <input type="text" v-model="result">
  </div>

2. Vue实例代码：

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        opt: '+',
        result: 0
      },
      methods: {
        calc() {
          const str = `parseFloat(${this.n1}) ${this.opt} parseFloat(${this.n2})`
          this.result = eval(str)
        }
      }
    });
  </script>