lovecoding
/
VIP20


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{border: '1px solid red', margin: '10px', padding: '20px'}">
        <p>{{ text1 }}</p>
        <!-- 当输入框的值有用户输入发生改变后 会触发 input 事件 -->
        <!-- 在 视图容器中 可以通过 Vue实例的 $event 属性 来获取事件对象-->
        <input type="text" @input="text1=$event.target.value" />
      </div>
      <div
        :style="{border: '1px solid green', margin: '10px', padding: '20px'}"
      >
        <p>{{ text2 }}</p>
        <!-- 此时 当触发input事件后，会自动调用实例方法handleInput，同时传入一个参数 即事件对象 -->
        <input type="text" @input="handleInput" />
      </div>
      <div :style="{border: '1px solid blue', margin: '10px', padding: '20px'}">
        <p>{{ text3 }}</p>
        <!-- 这种事件处理程序，由于事件处理方法 自己调用的 因此你传入什么，该方法就能接收什么 -->
        <!-- 因此 该方法需要什么，你就必须自己手动传入 -->
        <input type="text" @input="onInput($event)" />
      </div>
    </div>
    <script>
      new Vue({
        data: {
          text1: '',
          text2: '',
          text3: '',
        },
        methods: {
          // 因此这里 可以定义一个形参接收 事件对象即可
          handleInput(ev) {
            this.text2 = ev.target.value;
          },
          onInput(e) {
            this.text3 = e.target.value;
          },
        },
      }).$mount('#app');
    </script>
  </body>
</html>