Vue入门到放弃04（Vue指令之v-model和双向数据绑定（简易计算器实现））

最新推荐文章于 2022-12-16 23:33:41 发布

开猿节流

最新推荐文章于 2022-12-16 23:33:41 发布

阅读量130

点赞数

分类专栏： Vue入门到放弃

本文为博主原创文章，未经博主允许不得转载。交流联系QQ：634487911

本文链接：https://blog.csdn.net/qq_38191191/article/details/103187248

版权

Vue入门到放弃专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Vue指令之v-model

<body>
  <div id="app">
    <h4>{{ msg }}</h4>

    <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定  -->
    <!-- <input type="text" v-bind:value="msg" style="width:100%;"> -->

    <!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
    <!-- 注意： v-model 只能运用在 表单元素中 -->
    <!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
      },
      methods: {
      }
    });
  </script>
</body>

简易计算器实现

<body>
  <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>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '+'
      },
      methods: {
        calc() { // 计算器算数的方法  
          // 逻辑：
          /* switch (this.opt) {
            case '+':
              this.result = parseInt(this.n1) + parseInt(this.n2)
              break;
            case '-':
              this.result = parseInt(this.n1) - parseInt(this.n2)
              break;
            case '*':
              this.result = parseInt(this.n1) * parseInt(this.n2)
              break;
            case '/':
              this.result = parseInt(this.n1) / parseInt(this.n2)
              break;
          } */

          // 注意：这是投机取巧的方式，正式开发中，尽量少用
          var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
          this.result = eval(codeStr)
        }
      }
    });
  </script>
</body>

开猿节流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门到放弃04（Vue指令之v-model和双向数据绑定（简易计算器实现））

Vue指令之v-model<body> <div id="app"> <h4>{{ msg }}</h4>  <!-- <input type="text" v-bind:value=...
复制链接

扫一扫