Vue中使用keyup

<el-form-item label="姓名:" prop="name">
        <el-input
          type="text"
          v-model="userInfo.name"
          autocomplete="off"
          @keyup.native="changeUserInformation"
        ></el-input>
      </el-form-item>

注意:在element-ui中需要@keyup.native,在普通的input中只需要 @keyup=“changeUserInformation”
在script中

  methods: {
    changeUserInformation(){
    	console.log("数据发生了变化1")
        this.changeInformation = true;
    },

关于Vue中keyup的补充:

事件代码事件描述
@keyup.enter回车按键松开触发
@keyup.left左键按键松开触发
@keyup.right右键按键松开触发
@keyup.up上键按键松开触发
@keyup.down下键按键松开触发
@keyup.delete删除键松开触发

其他监测数据变化方式:

  1. vue中提供了watch方法,它用于观察vue实列上的数据变动,来响应数据的变化。注意这种方法对我没有用处!因为我的是userInfo.name,如果v-model="userInfo"可能就能使用了(不过我没试过!);watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象
data(){
        return {
          example0:"",
          example1:"",
      }
    },
watch:{
 example0(newVal,oldVal){//监控单个变量
           ……
   }example2(newVal,oldVal){//监控对象
           ……
   }}
  1. computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义。
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

我之前使用过 AngularJS,所以对watch很熟悉。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

后记:每天将自己工作和学习中遇到的问题和好的方法记录下来。

Logo

前往低代码交流专区

更多推荐