IDEA VUE处理用户输入

 下面使用vue项目来创建一个页面来处理用户的输入。
 第一步:创建一个vue项目(demo),在创建一个vue页面。
 在vue页面中,创建两个输入标签input,定义name,name1,将name、name1绑定至input标签中。
在这里插入图片描述
 代码部分,在javascript中定义两个值name,name2,并赋值到input标签中,在运行vue项目。

	<template>
  <center style="margin-top: 100px">
    <div id="app">
      <div>处理用户输入</div><br />
      直接输入显示:<input v-model="name">{{name}}<br />
      离开方框显示:<input v-model.lazy="name1">{{name1}}
      <router-view/>
    </div>
  </center>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: '',
      name1: '',
    }
  }
}
</script>

 下面是动态效果图
 1.在第一个input标签中输入字符时,会立即显示到屏幕中,得出结论,v-model是双向绑定的,所以当改变input框中的值的时候,span中的内容随之改变而改变。
 2.在第二个input标签中添加.lazy修饰符之后,改变input框中的内容并不会使得span中的内容发生变化,此时当输入框失去焦点后触发change事件.控制台中输出相应内容,并显示在页面上。
在这里插入图片描述
 当加上lazy修饰符时,在input中双向绑定是不起作用的了。

发布了29 篇原创文章 · 获赞 51 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_35426391/article/details/98721704