zoukankan      html  css  js  c++  java
  • vue的v-model指令原理分析

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
    <div id="app">
      <div>使用v-on:input="change" :value="num": {{num}}</div>
      <input type="text"v-on:input="change" :value="num">
    
      <p>使用v-model给input绑定变量num2: {{num2}}</p>
      <input type="text" v-model="num2">
    
      <p>使用document.getElementById('input').oninput: 打印输入的数值: <span id="result"></span> </p>
      <input type="text" id="input">
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          num: 1,
          num2: 1
        },
        methods: {
          change(e) {
            this.num = e.target.value
            console.log(this.num)
          }
        }
      })
      document.getElementById('input').oninput = function(e) {
        document.getElementById('result').innerText = e.target.value
      }
    </script>
    </body>
    </html>
    

      运行结果:

      

    参考文档: http://www.jb51.net/article/113112.htm

    官方文档:http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件

  • 相关阅读:
    Go反射
    Go_CSP并发模型
    Go_select
    Go计时器
    day9:vcp考试
    day8:vcp考试
    day7:vcp考试
    day6:vcp考试
    day5:vcp考试
    day4:vcp考试
  • 原文地址:https://www.cnblogs.com/zph666/p/7524667.html
Copyright © 2011-2022 走看看